Question

一段时间以来，我一直在尝试解决CORS问题，但没有成功... 为了清楚起见，我在整个互连网上和StackOverflow上进行了搜索（这是一个很受欢迎的问题！），但是不幸的是，我无法通过提出的任何建议或解决方案来解决我的问题。

我有一个Angular（v8）应用程序，该应用程序从Lumen（v6）API请求数据。我创建了一个中间件来克服CORS和Preflight的要求。该API不仅服务于Angular应用，还服务于其他Android和iOS客户端。当应用程序在我的开发机（本地主机）上运行时，我没有问题，但是当将其上传到服务器时，我开始收到CORS错误。

移动应用程序可以正常工作，但是当涉及到Angular应用程序时，我陷入了可怕的邪恶CORS。

这是我的中间件：

class CorsMiddleware
{
    public function handle($request, Closure $next)
    {
        $headers = [
            'Access-Control-Allow-Origin'      => '*',
            'Access-Control-Allow-Methods'     => 'POST, GET, OPTIONS, PUT, PATCH, DELETE',
            'Access-Control-Allow-Credentials' => 'true',
            'Access-Control-Max-Age'           => '86400',
            'Access-Control-Allow-Headers'     => 'Origin, Content-Type, X-Auth-Token, Authorization, X-Requested-With, Application'
        ];

        //the options method is never present in the request!
        if ($request->isMethod('OPTIONS'))
        {
            return response()->json('{"method":"OPTIONS"}', 200, $headers);
        }

        $response = $next($request);
        foreach($headers as $key => $value)
        {
            $response->header($key, $value);
        }

        return $response;
    }
}

由于移动应用程序正在运行，我认为该问题与Preflight请求有关。尽管应该由中间件来解决。

我已经调试了API，当Angular发出请求（POST）时，它永远不会进入CORS中间件。

这是我的路线：

$router->group(['prefix' => 'api/v1'], function () use ($router) {

    $router->post('/register', 'AuthController@register');
    $router->post('/login', 'AuthController@login');
    //$router->options('/login', 'AuthController@login'); //not entering CORS either....

});

为什么CORS中间件不处理预检请求？我想念什么？

要暂时解决我的问题并能够使用Angular应用，我在web.config文件中添加了以下内容：

<!-- SOLVE CORS ISSUES TEMPORARILY -->
<httpProtocol>
  <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Headers" value="Origin, Content-Type, Accept, Authorization, X-Requested-With, Application" />
      <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, PATCH, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>
<!-- /SOLVE CORS ISSUES TEMPORARILY -->

我真的不喜欢这种解决方案，并且想知道如何以正确的方式解决这个问题。

更新：尽管该问题可能与Angular（或IIS）没有直接关系，但我所面临的问题仅在使用Angular应用程序时才观察到，而在其他客户端（Android和iOS）中则没有。这就是为什么我在问题中引用并标记了Angular和IIS。

角和流明的飞行前选项和CORS问题

0 个答案: