对预检请求的响应没有通过访问控制检查Laravel和Ajax调用
我在远程服务器中托管的Laravel 5.1中创建了REST api。现在,我试图从另一个网站(我在本地)使用该API。对预检请求的响应没有通过访问控制检查Laravel和Ajax调用
在Laravel中,我设置了发送CORS头文件所需的行。我还使用邮差测试了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。 对预检请求的响应未通过访问控制检查:否 请求的 资源上存在“访问控制 - 允许来源”标头。因此不允许访问原产地'http://localhost'。
在后端
在我设置的API(使用Laravel中间件设置头):
return $next($request)
->header('Access-Control-Allow-Origin', '*')
->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
所以,我感到困惑的地方是完全问题。
- 在服务器中?但为什么邮差工作正常?
- 是否在Ajax调用中?那么,我应该添加什么?
您的后端代码必须包含一些明确的处理OPTIONS
请求发送一个200
响应只有配置的标头;例如:
if ($request->getMethod() == "OPTIONS") {
return Response::make('OK', 200, $headers);
}
服务器端的代码也必须发送一个Access-Control-Allow-Headers
响应头,其中包括token
请求的名称头的前端代码发送:
-> header('Access-Control-Allow-Headers', 'token')
但后来为什么用邮差工作正常吗?
因为邮差不是一个Web应用程序,并且不受同一来源的政策限制,所以浏览器会放在Web应用程序上,以限制它们制作跨源请求。 Postman是一个浏览器插件,为了方便测试请求,他们可以使用curl
或命令行中的任何内容在浏览器之外制作。邮差可以*发出跨域请求。
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS相比之下,它解释了浏览器如何阻止网络应用发出跨域请求,以及如何通过配置后端发送正确的CORS头来解除浏览器的阻止。
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests解释了为什么浏览器正在发送请求您的后端需要处理的OPTIONS
。