Angular 和 Laravel CORS 访问控制允许来源问题

Question

在过去的几个月里，我一直在我的开发机器上本地运行 Angular（客户端）和 Laravel（API）应用程序，没有任何问题。几天前，我将应用程序（客户端和 api）上传到服务器，突然之间我开始出现 CORS 错误：

Access to XMLHttpRequest at 'https://api.domain.pt/api/login' from origin 'https://client.domain.pt' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

在开发之初，我也遇到了这些错误，因为我为客户端和 api（client.localhost 和 api.localhost）使用了不同的本地域，最终解决了将 CORS 中间件添加到我的问题 Laravel API:

public function handle($request, Closure $next)
{
    //apply cors only to api routes
    if (Request::segment(1) == 'api') {

        header("Access-Control-Allow-Origin: *"); 

        $headers = [
            'Access-Control-Allow-Methods' => 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Headers' => 'X-Requested-With, X-Auth-Token, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding, X-Login-Origin',
            'Access-Control-Allow-Credentials' => 'true'
        ];

        if ($request->isMethod("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);
        }
    } else {
        $response = $next($request);
    }

    return $response;
}

所有路由都在使用 CORS 中间件。当应用程序尝试 post 登录 api (/api/login) 它甚至没有进入 CORS 中间件。

为什么这个在本地工作而不在服务器上工作？

Answer 1

我已经设法解决了我的问题。由于我的自定义 CORS 中间件未被调用，我将自定义 headers 添加到我的 web.config 文件中：

<configuration>
  <system.webServer>        
    <!-- SOLVES CORS ISSUES -->
    <httpProtocol>
     <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="X-Requested-With, X-Auth-Token, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding, X-Login-Origin" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
     </customHeaders>
   </httpProtocol>
   <!-- /SOLVES CORS ISSUES -->
  </system.webServer>
</configuration>

这是最合适的解决方案，但我现在打算使用它。如果有人有任何其他解决方案，而不是强制自定义 headers，请回复。

更新：

Apache 的临时解决方案。将此添加到您的 .htaccess 文件中：

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "X-Requested-With, X-Auth-Token, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding, X-Login-Origin, responseType"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"

Answer 2

请按照以下帮助和参考 link 寻求帮助：

You can check CORS Middleware for Laravel package or below link:

Angular and Laravel CORS Access-Control-Allow-Origin Issues

Angular 和 Laravel CORS 访问控制允许来源问题

Angular and Laravel CORS Access-Control-Allow-Origin Issues

angular

laravel

cors

laravel-passport

laravel-5.7