laravel CORS 策略已阻止从源“localhost”访问“production_api_url”处的 XMLHttpRequest
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/56626181/
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
Access to XMLHttpRequest at 'production_api_url' from origin 'localhost' has been blocked by CORS policy
提问by Gowtham A Satheesh
I am working on a project which build a website by using Angular 2 as frontend and Laravel 5.7. In the website, I am trying to implement a user profile section like, login, signup, password reset, forgot password, profile view, edit profile. I am written all the apis needed for the user profile section and tested it in the POSTMAN and everything become fine. But, when I am trying to implement the apis which needs the api token, there I got this error
我正在开发一个项目,该项目使用 Angular 2 作为前端和 Laravel 5.7 来构建网站。在网站中,我试图实现一个用户配置文件部分,如登录、注册、密码重置、忘记密码、配置文件查看、编辑配置文件。我编写了用户配置文件部分所需的所有 api 并在 POSTMAN 中对其进行了测试,一切都变得很好。但是,当我尝试实现需要 api 令牌的 api 时,我收到了这个错误
Access to XMLHttpRequest at 'http://www.peterbookhouse.com/vibes/backend/public/api/changePassword' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status."
CORS 政策已阻止在“ http://www.peterbookhouse.com/vibes/backend/public/api/changePassword”处访问 XMLHttpRequest,来自源“ http://localhost:4200”:对预检请求的响应不通过访问控制检查:它没有 HTTP ok 状态。”
I can't find a solution for this. Please help me to find a solution for this issue.
我找不到解决方案。请帮助我找到解决此问题的方法。
Thanks in advance
提前致谢
I already created middleware for CORS and added that middleware for the routes which needs.
我已经为 CORS 创建了中间件,并为需要的路由添加了该中间件。
I tried two different codes in the middleware. I here pasting those codes.
我在中间件中尝试了两种不同的代码。我在这里粘贴这些代码。
1.
1.
return $next($request)
->header(‘Access-Control-Allow-Origin', ‘*')
->header(‘Access-Control-Allow-Methods', ‘GET, POST, PUT, DELETE, OPTIONS')
->header(‘Access-Control-Allow-Headers', ‘X-Requested-With, Content-Type, X-Token-Auth, Authorization');
2.
2.
header("Access-Control-Allow-Origin: *");
// ALLOW OPTIONS METHOD
$headers = [
'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
'Access-Control-Allow-Headers'=> 'Content-Type, X-Auth-Token, Origin, Authorization'
];
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;
回答by RAJEESH PM
Try adding these headers in top of your laravel applications routes/api.php
尝试在 Laravel 应用程序 routes/api.php 的顶部添加这些标题
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Authorization");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");