jquery - XMLHTTPRequest 无法加载 http ://. .. Access-Control-Allow-Origin 不允许来源 http://localhost:port

Question

我正在使用一些第 3 方 Web api，当我在应用程序中通过 ajax 调用调用该 Web api 时，总是会出错而不是成功。在检查控制台时，我收到“XMLHTTPRequest 无法加载 http://... Origin http://localhost:port/is not allowed by Access-Control-Allow-Origin”错误

            $.ajax({
               url: "SomeURL",
               type:"GET",
               dataType: 'jsonp',
               crossDomain: true,
               success: function (data) {
                   alert("Success");
               },
               error: function (data, Errtext) {
                  alert("some error occured");
               }
           });

当我直接在浏览器中访问该 URL 时，我会收到 XML 格式的数据

我也提到过类似的问题 How to resolve uncaught syntax error in jsonp 但没有得到解决方案

提前致谢

Answer 1

您能够在浏览器中看到响应，因为只有跨域 ajax 请求才会受到 same origin policy 的约束。 .

要克服同源策略的限制，您应该使用 jsonp 或跨源资源共享(CORS)。

JSONP: What is JSONP all about?

请注意，要使用 jsonp ，您调用的第三方 Web api 应支持 jsonp。

跨域资源共享: 跨源资源共享标准通过添加新的 HTTP header 来工作，这些 header 允许服务器描述允许使用 Web 浏览器读取该信息的源集。此外，对于可能对用户数据造成副作用的 HTTP 请求方法(特别是 GET 之外的 HTTP 方法，或某些 MIME 类型的 POST 使用)，该规范要求浏览器“预检”请求，征求支持的方法使用 HTTPOPTIONS 请求方法从服务器发出请求，然后在服务器“批准”后，使用实际 HTTP 请求方法发送实际请求。服务器还可以通知客户端是否应随请求发送“凭据”(包括 Cookie 和 HTTP 身份验证数据)。

https://developer.mozilla.org/en/docs/HTTP/Access_control_CORS

要在 ASP.NET 应用程序中启用 CORS:

<system.webServer>
 <httpProtocol>
  <customHeaders>
   <add name="Access-Control-Allow-Origin" value="*" />
   <add name="Access-Control-Allow-Headers" value="Content-Type" />
  </customHeaders>
 </httpProtocol>
</system.webServer>