从CORS策略阻止从源“ localhost”访问“ production_api_url”处的XMLHttpRequest

时间:2019-06-17 07:02:20

标签: angular laravel api cors

我正在一个项目中,该项目使用Angular 2作为前端和Laravel 5.7来构建网站。在网站中,我正在尝试实现用户个人资料部分,例如登录,注册,密码重置,忘记密码,个人资料视图,编辑个人资料。我编写了用户配置文件部分所需的所有api,并在POSTMAN中对其进行了测试,一切都变得很好。但是,当我尝试实现需要api令牌的api时,出现了此错误

  

从原点“ http://www.peterbookhouse.com/vibes/backend/public/api/changePassword”到“ http://localhost:4200”的XMLHttpRequest的访问已被CORS策略阻止:对预检请求的响应未通过访问控制检查:它没有HTTP正常状态。 “

我找不到解决方案。请帮助我找到此问题的解决方案。

预先感谢

我已经为CORS创建了中间件,并为所需的路由添加了该中间件。

我在中间件中尝试了两种不同的代码。我在这里粘贴这些代码。

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。

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;

1 个答案:

答案 0 :(得分:0)

尝试在laravel应用程序route / 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");