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

Question

我使用ngResource在Amazon Web Services上调用REST API时收到此错误:

XMLHttpRequest无法加载 http://server.apiurl.com:8000/s/login?login=facebook.对预检请求的响应未通过访问控制检查:请求的资源上不存在"Access-Control-Allow-Origin"标头.原产地" :HTTP //本地主机,因此"是不允许访问. 错误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,我不知道还有什么可以解决这个问题.我甚至将服务器配置为接受来自源的头文件localhost.

Answer 1

您正在遇到CORS问题.

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

1. 关闭CORS.例如:如何关闭chrome中的cors
2. 为您的浏览器使用插件
3. 使用代理,如nginx.如何设置的示例

更详细地说,您正试图从localhost访问api.serverurl.com.这是跨域请求的确切定义.

通过关闭它只是为了让你的工作完成(好吧,如果你访问其他网站并给你带来不好的安全性,你可以使用代理,这会让你的浏览器认为所有请求都来自本地主机)你真的有本地服务器然后调用远程服务器.

所以api.serverurl.com可能会成为localhost:8000/api,您的本地nginx或其他代理将发送到正确的目的地.

现在受欢迎的需求,100%的CORS信息 ......同样很棒的味道!

而对于downvoters来说......绕过CORS正是那些只是学习前端的人所展示的. https://codecraft.tv/courses/angular/http/http-with-promises/

Answer 2

我的"API服务器"是一个PHP应用程序,所以为了解决这个问题,我找到了以下解决方案:

将行放在index.php中

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

Answer 3

在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")]控制器.

Answer 4

关于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帖子。

Answer 5

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

Answer 6

如果你正在写一个chrome扩展名

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

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

Answer 7

在我的 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]

Answer 8

如果您偶然使用IIS服务器.您可以在HTTP请求标头选项中设置以下标头.

Access-Control-Allow-Origin:*
Access-Control-Allow-Methods: 'HEAD, GET, POST, PUT, PATCH, DELETE'
Access-Control-Allow-Headers: 'Origin, Content-Type, X-Auth-Token';

有这个所有帖子,得到等,将工作正常.

Answer 9

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

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

Answer 10

在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: *");
...

Answer 11

要解决Node JS应用程序中的跨域请求问题：

npm i cors

只需将下面的行添加到 app.js

let cors = require('cors')
app.use(cors())

Answer 12

我们的团队偶尔会使用 Vue、axios 和 C# WebApi 看到这种情况。在您尝试点击的端点上添加路由属性可为我们修复它。

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