对预检请求的响应未通过访问控制检查Laravel和Ajax调用

Question

我在远程服务器中托管的Laravel 5.1中创建了一个REST api.现在,我'试图从其他网站(我在本地)使用该API.

在Laravel中,我设置了发送CORS头所需的行.我还使用Postman测试了API,一切似乎都没问题!

在前端

然后,在网站上我使用ajax发送了POST请求,代码如下:

var url="http://xxx.xxx.xxx.xxx/apiLocation";
var data=$("#my-form").serialize();
    $.ajax({
                    type: "POST",
                    url: url,
                    data: data,
                    headers: { 'token': 'someAPItoken that I need to send'},
                    success: function(data) {
                        console.log(data);
                    },
                    dataType: "json",
                }); 

买然后我在控制台中收到此错误:

XMLHttpRequest无法加载http://xxx.xxx.xxx.xxx/apiLocation.对预检请求的响应未通过访问控制检查:请求的资源上不存在"Access-Control-Allow-Origin"标头.原产地" :HTTP //本地主机,因此"是不允许访问.

在后端

在API中我设置了这个(使用Laravel Middleware来设置标题):

return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

所以,我很困惑究竟问题出在哪里.

1. 在服务器？但那么为什么Postman工作正常呢？
2. 是在Ajax调用？那么,我应该添加什么？

Answer 1

您的后端代码必须包含一些显式处理OPTIONS请求，这些请求200仅使用配置的标头发送响应；例如：

if ($request->getMethod() == "OPTIONS") {
    return Response::make('OK', 200, $headers);
}

服务器端代码还必须发送一个Access-Control-Allow-Headers响应标头，其中包含token您的前端代码发送的请求标头的名称：

-> header('Access-Control-Allow-Headers', 'token')

但是为什么 Postman 工作正常？

因为 Postman 不是 Web 应用程序，并且不受浏览器在 Web 应用程序上设置的同源策略限制的约束，以限制它们发出跨源请求。Postman 是一个浏览器附加功能，可以方便地测试请求，就像它们可以在浏览器之外使用curl或从命令行发出的任何内容一样。Postman 可以自由地提出跨域请求。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS相反，解释了浏览器如何阻止 Web 应用程序发出跨域请求，以及如何通过配置您的后端发送正确的 CORS 标头。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests解释了为什么浏览器会发送OPTIONS后端需要处理的请求。