Question

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

从“ https://api.domain.pt/api/login”访问XMLHttpRequest 原点“ https://client.domain.pt”已被CORS阻止策略：对预检请求的响应未通过访问控制检查：标题上没有'Access-Control-Allow-Origin'标头请求的资源。

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

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中间件。当应用尝试发布到登录api（/ api / login）时，它甚至都没有进入CORS中间件。

为什么它在本地而不是在服务器上工作？

Answer 1

请点击下面的帮助和参考链接以获取帮助：

您可以在CORS中间件中查看Laravel软件包或以下链接：

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

Answer 2

我设法解决了我的问题。由于未调用自定义的CORS中间件，因此我将自定义标头添加到了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>

它是最合适的解决方案，但是我现在要使用它。如果有人有其他解决方案，而不是强制使用自定义标题，请回复。

更新：

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"

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

2 个答案: