从源“http://localhost:8080”访问“API_URL”处的 XMLHttpRequest 已被 CORS 策略阻止：

Posted 2023-03-13

【中文标题】从源“http://localhost:8080”访问“API_URL”处的 XMLHttpRequest 已被 CORS 策略阻止：

【英文标题】：Access to XMLHttpRequest at 'API_URL' from origin 'http://localhost:8080' has been blocked by CORS policy:

【发布时间】：2019-11-11 21:10:54

【问题描述】：

Access to XMLHttpRequest at 'API_URL' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

当我运行本地主机系统来访问服务器 API 时。它将生成令牌，而不是我收到上述错误。请帮帮我。

【问题讨论】：

您必须在后端启用 CORS。 API 使用哪种框架/语言？

ASP.Net API，我只收到来自标头的响应。订阅数据出现错误。

This 应该能帮到你

但是我的 Angularjs 1.6 相同的 API URL 正在成功运行。怎么样？

API 和 angularjs 应用程序是否在同一主机/端口下运行？

【参考方案1】：

最佳选择：CORS 标头（需要更改服务器） CORS（跨域资源共享）是服务器说“我会接受你的请求，即使你来自不同的来源”的一种方式。这需要服务器的配合——因此，如果您无法修改服务器（例如，如果您使用外部 API），则此方法将不起作用。

修改服务器以添加标头 Access-Control-Allow-Origin: * 以启用来自任何地方的跨域请求（或指定域而不是 *）。这应该可以解决您的问题。

第二选择：代理服务器 如果无法修改服务器，可以运行自己的代理。如果该代理与您的页面不在同一来源，则此代理可以返回 Access-Control-Allow-Origin 标头。

您无需向某个远程服务器发送 API 请求，而是向您的代理发出请求，代理会将它们转发到远程服务器。

对于第一个选项，如果使用 .Net Core：

       services.AddCors(options =>
        
            options.AddPolicy("CorsPolicy",
                builder => builder.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials());
        );

和

app.UseCors("CorsPolicy");

【讨论】：

我正在使用 Angular 5 和 ionic 3。可以添加 angular。我只有 API url。无法访问服务器 asp.net。像角度这样的客户端，任何事情都是可能的。

嗨，何塞·马托斯，添加 proxy.config.json 文件后。当我从本地主机访问服务器 API 时。我得到同样的错误。请给我解决方案

执行上述操作后，还是出现同样的错误。

【参考方案2】：

您需要在您的 API 中启用跨域资源，以便它可以作为调用者从 localhost 访问。

更多信息在这里https://enable-cors.org/server.html和这里https://www.html5rocks.com/en/tutorials/cors/

【讨论】：

HTTP/1.1 200 OK 允许：GET、HEAD、POST、TRACE、OPTIONS 内容长度：0 内容语言：en-US 服务器：X-Powered-By：X-Frame-Options： Allow-From API-URL X-ASPNET-VERSION：日期：2019 年 7 月 1 日星期一 07:58:41 GMT

我的标题响应如上一个。

最重要的是您的 API 没有在“白名单”中的引用者 (localhost)：您可以通过 ((HttpServletResponse) servletResponse).addHeader("Access-Control -允许来源”，“*”）； ((HttpServletResponse) servletResponse).addHeader("Access-Control-Allow-Methods","GET, OPTIONS, HEAD, PUT, POST"); （Java 示例）

var headers = 'Access-Control-Allow-Origin' : '*', 'Access-Control-Allow-Methods' : 'POST, GET, OPTIONS, PUT', 'Content-Type ': '应用程序/json; charset=UTF-8', 'Accept': 'application/json' ;（这是我的标题，我遇到了同样的错误）

您的 REST 调用的完整配置是什么？你确定你使用的是“application/json”吗？

【参考方案3】：

根据大量研究解决了 Cors 问题。我有一个解决方案。我已经参考了我的应用程序中安装的 ionic cordova plugin 之类的文档。修复 Cors 问题。下面给出文档 URL：https://ionicframework.com/docs/native/http

通过实施就可以了。

我在下面得到了这样的服务器 API 响应。请帮帮我。

数据：""statusCode":"1004","message":"授权失败""