XMLHTTPRequest 无法加载 http://... Origin http://localhost:port is not allowed by Access-Control-Allow-O

Posted 2023-03-03

【中文标题】XMLHTTPRequest 无法加载 http://... Origin http://localhost:port is not allowed by Access-Control-Allow-Origin

【英文标题】：XMLHTTPRequest cannot load http://... Origin http://localhost:port is not allowed by Access-Control-Allow-Origin

【发布时间】：2013-10-25 18:10:35

【问题描述】：

我正在使用一些第 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 但没有得到解决方案

提前致谢

【参考方案1】：

您可以在浏览器中看到响应，因为只有跨域 ajax 请求受same origin policy 约束。

为了克服同源策略的限制，你应该使用jsonp或跨域资源共享（CORS）。

JSONP： What is JSONP all about?

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

CORS： 跨源资源共享标准通过添加新的 HTTP 标头来工作，这些标头允许服务器描述允许使用 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>