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

Question

从源 'http://localhost:8080' 尝试访问 'API_URL' 的 XMLHttpRequest 被 CORS 策略阻止：预检请求的响应未通过访问控制检查：所请求的资源上不存在 'Access-Control-Allow-Origin' 标头。

当我运行本地主机系统来访问服务器 API 时，它会生成令牌，而不是像上述错误一样。请帮我解决这个问题。

- selva kumar

---

你需要在后端启用CORS。这个API使用哪个框架/语言？ - Madhan Varadhodiyil

ASP.Net API，我只从头部获取响应。订阅数据出现错误。 - selva kumar

这个链接应该会对你有所帮助：https://enable-cors.org/server_aspnet.html - Madhan Varadhodiyil

但是我的AngularJS 1.6版本相同的API URL可以成功运行。为什么？ - selva kumar

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

Answer 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());
        });

并且

应用程序使用跨域资源共享策略 "CorsPolicy"。

- José Matos

---

我正在使用Angular 5和Ionic 3。在Angular中可以添加。我只有API URL，没有访问服务器的ASP.NET权限。任何客户端都可以像Angular一样实现。 - selva kumar

嗨，Jose Matos，我添加了proxy.config.json文件后，当我从本地主机访问服务器API时，仍然遇到相同的错误。请给我解决方案。 - selva kumar

实施以上措施后，我仍然得到相同的错误。 - w0ns88

Answer 2

您需要在API中启用跨域资源，以便可以从本地主机作为调用方访问。

更多信息请参见https://enable-cors.org/server.html和https://www.html5rocks.com/en/tutorials/cors/

- Pier Daniele Cretara

---

HTTP/1.1 200 OK 允许: GET、HEAD、POST、TRACE、OPTIONS 内容长度: 0 内容语言: en-US 服务器: X-Powered-By: X-Frame-Options: 允许来自http://API-URL的请求 X-ASPNET-VERSION: 日期: Mon, 01 Jul 2019 07:58:41 GMT - selva kumar

我的头部响应就像上面那个一样。 - selva kumar

最重要的是，您的API的Referer（http://localhost）不存在“白名单”中：您可以通过以下指令添加它：((HttpServletResponse) servletResponse).addHeader("Access-Control-Allow-Origin", "*"); ((HttpServletResponse) servletResponse).addHeader("Access-Control-Allow-Methods","GET, OPTIONS, HEAD, PUT, POST"); （Java示例） - Pier Daniele Cretara

变量头部 = { 'Access-Control-Allow-Origin' : '*', 'Access-Control-Allow-Methods' : 'POST, GET, OPTIONS, PUT', 'Content-Type': 'application/json; charset=UTF-8', 'Accept': 'application/json' };（这是我的头部，我得到了相同的错误） - selva kumar

你的 REST 调用完整配置是什么？你确定你正在使用 "application/json" 吗？ - Pier Daniele Cretara

Answer 3

基于大量的研究，CORS问题已得到解决。我找到了一个解决方案。我参考了像ionic cordova插件这样的文档，在我的应用程序中安装并修复了CORS问题。以下是文档URL: https://ionicframework.com/docs/native/http

请仔细阅读并实施。

我收到了以下服务器API响应，请帮忙解决：

data: "{"statusCode":"1004","message":"Authorization failed"}"

- selva kumar