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

Posted 2023-03-04

【中文标题】CORS 策略已阻止从源“localhost”访问“production_api_url”处的 XMLHttpRequest

【英文标题】：Access to XMLHttpRequest at 'production_api_url' from origin 'localhost' has been blocked by CORS policy

【发布时间】：2019-10-30 17:52:11

【问题描述】：

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

从源 'http://localhost:4200' 访问 XMLHttpRequest 在 'http://localhost:4200' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。"

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

提前致谢

我已经为 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;

【问题讨论】：

使用这个github.com/barryvdh/laravel-cors 来处理后端的cors

它处于什么状态？

它显示“Access-Control-Allow-Origin 只允许一个值，多个给定”

"'Access-Control-Allow-Origin' 标头包含多个值 '*, localhost:4200'，但只允许一个。" - 这是现在的错误

【参考方案1】：

尝试在您的 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");