Question

我在休息api A中有一个GET方法，它返回一个string []

列表

在我的网站B中，我有一个网页。我想使用从web api A

获取的字符串值自动填充输入文本

我将我的网络API A放在IIS上并将其绑定到localhost:9000

网站B：

<input type="text" id="tags"/>

$("#tags").autocomplete({
    source: function (request, response) {
        jQuery.getJSON(                   
            "http://localhost:9000/action/controller",
            function (data) { 
                alert(data);
                data = jQuery.unique(data)
                response(data);
            }
        );
    }, 
    select: function (event, ui) { 
        //work here
    },
});

当我运行网站B时，默认情况下需要端口60400

所以当我在输入id="tags"中写入时，我收到以下错误：

XMLHttpRequest cannot load http://localhost:9000/action/controller. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:60400' is therefore not allowed access.

有人可以帮忙吗？

Answer 1

您显然遇到了问题，因为webSite A与其调用的服务没有相同的域（a.k.a. origin）。您必须在Web服务上启用CORS才能使其正常运行。我建议你阅读这篇文章：https://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

出于安全原因，未明确配置的应用程序不会提供跨源请求。在.NET堆栈上，您可以使用Cors Nuget-Package，这将使CORS像2行附加代码一样简单。

Answer 2

您必须在服务器端指定标头。像这样的东西（web.config）：

<httpProtocol>
  <customHeaders>
    <remove name="X-Powered-By" />
    <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
    <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS,PUT,DELETE" />
    <add name="Access-Control-Allow-Origin" value="http://localhost:9000" />
    <add name="Access-Control-Allow-Credentials" value="true" />
  </customHeaders>
</httpProtocol>

使用CORS的非常好的例子，你可以在这里找到解释： CORS
如果我没记错，CORS需要xhr.withCredentials = true;，所以我宁愿使用原生var xhr = new XMLHttpRequest();或者你想要jQuery。
任何跨域调用都需要2个请求（第1个包含动词OPTIONS，第2个请求本身）。但是第二个请求只有在第一个请求才会从服务器返回提供标题。

Answer 3

请检查所需的标头是否已连接到服务器。您可以根据要处理的数据创建preflight请求或simple请求。除非您的服务器具有所需的标头，否则您的客户将无法获得访问权限。这是由Same origin policy引起的。请对CORS进行一些研究，这是绕过same origin policy的方法之一。在我的服务器端，我允许使用preflight请求和withCredentials值作为true来源。此外，我使用AJAX首先创建一个飞行前请求，然后触发POST方法。

HTML5rocks CORS是了解CORS功能的绝佳文章。

这是我的服务器配置中的服务器端代码。

<add name="Access-Control-Allow-Headers" value="*"/>
<add name="Access-Control-Allow-Methods" value="OPTIONS" />
<add name="Access-Control-Allow-Origin" value="http://localhost:9002" />
<add name="Access-Control-Allow-Credentials" value="true" />

jQuery.getJSON（）上没有'Access-Control-Allow-Origin'标头错误

3 个答案: