javascript AngularJS 的预检选项请求不适用于 Chrome？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27729351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Preflight OPTIONS request by AngularJS not working with Chrome?
提问by Rohan
I have developed a simple application using AngularJS hosted here. I am consuming an API I developed myself in Laravel hosted here. When I try to log into the application using Firefox, it works fine. My API accepts the pre-flight OPTIONS request and responds with a 200 OK. Finally the POST request generates a token and the user is logged in.
我使用此处托管的 AngularJS 开发了一个简单的应用程序。我消费我开发我自己在Laravel的API托管在这里。当我尝试使用 Firefox 登录应用程序时，它工作正常。我的 API 接受飞行前 OPTIONS 请求并以 200 OK 响应。最后 POST 请求生成一个令牌，用户登录。
On the other hand, when Chrome sends the pre-flight OPTIONS request, it receives an 403 back and it gives me this error in the console:
另一方面，当 Chrome 发送 pre-flight OPTIONS 请求时，它收到一个 403 返回并在控制台中给我这个错误：
XMLHttpRequest cannot load http://angulairapi.rohanchhabra.in/auth. Invalid HTTP status code 403
I have tried sending the OPTIONS request on /auth via Postman REST client also, and it gives back a 200 OK as expected. Why is Chrome behaving like this? What am I missing?
我也尝试通过 Postman REST 客户端在 /auth 上发送 OPTIONS 请求，它按预期返回 200 OK。为什么 Chrome 会这样？我错过了什么？
采纳答案by rigobcastro
The Access Control is a server responsibility, you need config this in Laravel.
访问控制是服务器的职责，你需要在 Laravel 中配置它。
Use this package: Laravel Corsthis helps very much.
使用这个包：Laravel Cors这很有帮助。
回答by Dmitry
In first you have to send those Headers (wildcard works incorrect sometimes):
首先，您必须发送这些标头（通配符有时不正确）：
Access-Control-Allow-Headers: X-Requested-With, content-type
Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS
In second (and important) remove header from AngularJs service $httpProvider in config:
在第二个（也是重要的）从配置中的 AngularJs 服务 $httpProvider 中删除标头：
myApp.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
]);
回答by algos
in filters.php (Laravel 4.2)
在 filters.php (Laravel 4.2)
add below
在下面添加
App::before(function($request)
{
// Enable CORS
// In production, replace * with http://yourdomain.com
header("Access-Control-Allow-Origin: *");
//header('Access-Control-Allow-Credentials: true'); optional
if (Request::getMethod() == "OPTIONS") {
// The client-side application can set only headers allowed in Access-Control-Allow-Headers
$headers = [
'Access-Control-Allow-Methods'=> '*',
'Access-Control-Allow-Headers'=> '*'
];
return Response::make('You are connected to the API', 200, $headers);
}
});
you can change the values of Access-Control-*to suite your need
您可以更改的值以Access-Control-*满足您的需要
回答by shlensky
Problem in "Access-Control-Request-Headers: accept". You need to add "accept" to your "Access-Control-Allow-Headers".
“访问控制请求头：接受”中的问题。您需要在“Access-Control-Allow-Headers”中添加“accept”。
Compare this two request:
比较这两个请求：
Chrome: 403 Forbidden curl 'http://angulairapi.rohanchhabra.in/auth' -X OPTIONS -H 'Access-Control-Request-Method: POST' /angulair.rohanchhabra.in' -H 'Accept-Encoding: gzip, deflate, sdch' -H 'Accept-Language: ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36' -H 'Accept: /' -H 'Referer: http://angulair.rohanchhabra.in/' -H 'Connection: keep-alive' -H 'Access-Control-Request-Headers: accept, content-type' -v
Firefox: 200 OK curl 'http://angulairapi.rohanchhabra.in/auth' -X OPTIONS -H 'Access-Control-Request-Method: POST' -H 'Origin: http://angulair.rohanchhabra.in' -H 'Accept-Encoding: gzip, deflate, sdch' -H 'Accept-Language: ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36' -H 'Accept: /' -H 'Referer: http://angulair.rohanchhabra.in/' -H 'Connection: keep-alive' -H 'Access-Control-Request-Headers: content-type' -v
Chrome: 403 Forbidden curl ' http://angulairapi.rohanchhabra.in/auth' -X OPTIONS -H 'Access-Control-Request-Method: POST' /angulair.rohanchhabra.in' -H 'Accept-Encoding: gzip, deflate, sdch' -H 'Accept-Language: ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36' -H 'Accept: /' -H 'Referer: http://angulair.rohanchhabra.in/' -H 'Connection:保持活动' -H '访问控制请求头：接受，内容类型' -v
Firefox: 200 OK curl ' http://angulairapi.rohanchhabra.in/auth' -X OPTIONS -H 'Access-Control-Request-Method: POST' -H 'Origin: http://angulair.rohanchhabra.in' - H 'Accept-Encoding: gzip, deflate, sdch' -H 'Accept-Language: ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36' -H 'Accept: /' -H 'Referer: http://angulair.rohancha在/'-H'连接：保持活动'-H'访问控制请求头：内容类型'-v
回答by harishr
In Laravel, try to set : 'Access-Control-Allow-Methods'& 'Access-Control-Allow-Headers'to '*'
在 Laravel 中，尝试将 : 'Access-Control-Allow-Methods'&设置'Access-Control-Allow-Headers'为'*'
public function handle($request, Closure $next)
{
header("Access-Control-Allow-Origin: *");
// ALLOW OPTIONS METHOD
$headers = [
'Access-Control-Allow-Methods'=> '*',
'Access-Control-Allow-Headers'=> '*'
];
if($request->getMethod() == "OPTIONS") {
// The client-side application can set only headers allowed in Access-Control-Allow-Headers
return Response::make('OK', 200, $headers);
}
$response = $next($request);
foreach($headers as $key => $value)
$response->header($key, $value);
return $response;
}
