对预检请求的响应未通过访问控制检查

JavaScript

Mandy斯丁

2020-03-16

我在使用ngResource调用Amazon Web Services上的REST API时遇到此错误：

XMLHttpRequest无法加载 http://server.apiurl.com:8000/s/login?login=facebook。对预检请求的响应未通过访问控制检查：请求的资源上不存在“ Access-Control-Allow-Origin”标头。因此，不允许访问源“ http：// localhost ”。 错误405

服务：

socialMarkt.factory('loginService', ['$resource', function($resource){    
    var apiAddress = "http://server.apiurl.com:8000/s/login/";
    return $resource(apiAddress, { login:"facebook", access_token: "@access_token" ,facebook_id: "@facebook_id" }, {
                getUser: {method:'POST'}
            });
}]);

控制器：

[...]
loginService.getUser(JSON.stringify(fbObj)),
                function(data){
                    console.log(data);
                },
                function(result) {
                    console.error('Error', result.status);
                }
[...]

我正在使用Chrome，但我不知道该怎么做才能解决此问题。我什至将服务器配置为接受origin的标头localhost。

第1851篇《对预检请求的响应未通过访问控制检查》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共15个回答

Gil逆天 2020.03.16

只需几个步骤即可轻松解决此问题，而无需担心任何事情。请按照以下步骤解决。

打开（https://www.npmjs.com/package/cors#enabling-cors-pre-flight）
转到安装并复制命令npm install cors以通过节点终端进行安装
通过滚动转到“简单用法（启用所有CORS请求）”。然后将完整的声明复制并粘贴到您的项目中，然后运行它...这将肯定起作用。项目并尝试..这将起作用。这将解锁每个跨源资源共享。.以便我们可以在服务之间切换供您使用

蛋蛋TomItachi 2020.03.16

禁用Chrome安全性。右键单击->属性->目标，创建Chrome快捷方式，然后粘贴此“ C：\ Program Files（x86）\ Google \ Chrome \ Application \ chrome.exe” --disable-web-security --user -data-dir =“ c：/ chromedev”

Davaid阳光 2020.03.16

GeoServer的独立发行版包括Jetty应用程序服务器。启用跨域资源共享（CORS），以允许您自己域外的JavaScript应用程序使用GeoServer。

取消以下<filter>，并<filter-mapping>从webapps /下的GeoServer / WEB-INF / web.xml文件：

<web-app>
  <filter>
      <filter-name>cross-origin</filter-name>
      <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
  </filter>
  <filter-mapping>
      <filter-name>cross-origin</filter-name>
      <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

ItachiA 2020.03.16

很容易错过的东西...

在解决方案资源管理器中，右键单击api-project。在属性窗口中，将“匿名身份验证”设置为“已启用”！

斯丁Eva 2020.03.16

当DNS服务器设置为8.8.8.8（谷歌的）时，我已经遇到了这个问题。实际上，问题出在路由器上，我的应用程序尝试通过Google而不是本地与服务器连接（对于我的特定情况）。我删除了8.8.8.8，这解决了问题。我知道可以通过CORS设置解决此问题，但也许有人会遇到与我相同的麻烦

蛋蛋伽罗猿 2020.03.16

导致此错误的一个很常见的原因可能是主机API已将请求映射到http方法（例如PUT），而API客户端正在使用其他http方法（例如POST或GET）调用API

AMandy 2020.03.16

我们的团队偶尔会使用Vue，axios和C＃WebApi看到这种情况。在您要命中的端点上添加一个路由属性可以为我们解决此问题。

[Route("ControllerName/Endpoint")]
[HttpOptions, HttpPost]
public IHttpActionResult Endpoint() { }

小卤蛋飞云伽罗 2020.03.16

在我的Apache VirtualHost配置文件中，添加了以下几行：

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

凯梅小胖 2020.03.16

在PHP中，您可以添加标题：

<?php
header ("Access-Control-Allow-Origin: *");
header ("Access-Control-Expose-Headers: Content-Length, X-JSON");
header ("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
header ("Access-Control-Allow-Headers: *");
...

老丝凯斯丁 2020.03.16

对于python flask服务器，您可以使用flask-cors插件启用跨域请求。

参见：https : //flask-cors.readthedocs.io/en/latest/

米亚Near 2020.03.16

在AspNetCore Web API中，通过添加“ Microsoft.AspNetCore.Cors”（版本1.1.1）并在Startup.cs上添加以下更改来解决此问题。

public void ConfigureServices(IServiceCollection services)
{ 
    services.AddCors(options =>
    {
          options.AddPolicy("AllowAllHeaders",
                builder =>
            {
                    builder.AllowAnyOrigin()
                           .AllowAnyHeader()
                           .AllowAnyMethod();
                });
    });
    .
    .
    .
}

和

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{


    // Shows UseCors with named policy.
    app.UseCors("AllowAllHeaders");
    .
    .
    .
}

然后戴上[EnableCors("AllowAllHeaders")]控制器。

Davaid古一 2020.03.16

JavaScript XMLHttpRequest和Fetch遵循同源策略。因此，使用XMLHttpRequest或Fetch的Web应用程序只能向其自己的域发出HTTP请求。

来源：https : //developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

您必须从服务器端发送Access-Control-Allow-Origin：* HTTP标头。

如果将Apache用作HTTP服务器，则可以将其添加到Apache配置文件中，如下所示：

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

默认情况下，Apache中启用了Mod_headers，但是，您可能需要通过运行以下命令来确保已启用：

 a2enmod headers

卡卡西Pro小卤蛋 2020.03.16

如果您正在编写扩展名

您必须manifest.json为您的域添加权限。

"permissions": [
   "http://example.com/*",
   "https://example.com/*"
]

逆天LLEY 2020.03.16

关于CORS，有一些警告。首先，它不允许使用通配符，*但不要让我受此限制，因为我已经在某处阅读过它，现在找不到该文章。

如果要从其他域发出请求，则需要添加允许来源标头。

 Access-Control-Allow-Origin: www.other.com

如果你正在影响服务器资源，如POST / PUT /补丁，如果MIME类型是比下面的不同要求application/x-www-form-urlencoded，multipart/form-data或text/plain浏览器会自动进行飞行前的OPTIONS请求来检查与服务器是否会允许它。

因此，您的API /服务器需要相应地处理这些OPTIONS请求，您需要使用相应的响应，access control headers并且http响应状态代码必须为200。

标头应该是这样的，根据您的需要进行调整：

   Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS
   Access-Control-Allow-Headers: Content-Type
   Access-Control-Max-Age: 86400

max-age标头很重要，在我的情况下，没有它就无法使用，我想浏览器需要“访问权限”有效期的信息。

另外，如果您要从其他域发出例如mime 的POST请求，则application/json还需要添加前面提到的allow origin标头，因此如下所示：

   Access-Control-Allow-Origin: www.other.com 
   Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS
   Access-Control-Allow-Headers: Content-Type
   Access-Control-Max-Age: 86400

当预检成功并获得所有需要的信息时，将发出您的实际请求。

一般来说，Access-Control在初始或飞行前请求中请求的任何标头都应在响应中给出，以使其起作用。

该链接的MDN文档中有一个很好的示例，您还应该查看此SO帖子。

达蒙JinJin 2020.03.16

您遇到了CORS问题。

有几种方法可以解决此问题。

关闭CORS。例如：如何关闭Chrome中的cors
使用浏览器插件
使用代理，例如nginx。如何设置的例子
完成服务器的必要设置。这更多是您已在EC2实例上加载的Web服务器的一个因素（假设这就是您所说的“ Amazon Web Service”的意思）。对于您的特定服务器，您可以参考启用CORS网站。