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

我有一个用 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://localhost' 因此不允许访问。

在后端

在 API 中我设置了这个（使用 Laravel 中间件来设置标头）：

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

所以，我很困惑到底问题出在哪里。

1. 在服务器里？但为什么 Postman 工作得很好呢？
2. 是在 Ajax 调用中吗？那么，那我应该添加什么呢？

您的后端代码必须包含一些显式处理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/docs/Web/HTTP/Access_control_CORS相反，解释了浏览器如何阻止 Web 应用程序发出跨源请求，以及如何通过配置后端发送正确的 CORS 标头来取消阻止浏览器执行此操作。

https://developer.mozilla.org/docs/Web/HTTP/Access_control_CORS#Preflighted_requests解释了浏览器发送该信息的原因OPTIONS请求你的后端需要处理。