仅在发送标头时出现 Cors答案

【问题标题】：Cors issues only when send headers仅在发送标头时出现 Cors
【发布时间】：2020-11-02 02:20:39
【问题描述】：

我在 http://localhost:8080 上运行 vueJS，在 http://stockprise.test/ 上运行 Lumen API。我想从 vueJS 到 API 执行以下请求：

    async log() {
          await fetch("http://stockprise.test/login", {
            method: "POST",
            headers: {
              "Content-Type": "application/json"
            },
            body: JSON.stringify({email:'test@gmail.com',password:'pass123'})
          }).then(
            function(response) {
              return response.text();
            },
            function(error) {
              error.message;
            }
          );
        }

然后我收到以下错误：

这是 lumen 中 Cors 的代码

        class CorsMiddleware
    {
        /**
         * Handle an incoming request.
         *
         * @param  \Illuminate\Http\Request  $request
         * @param  \Closure  $next
         * @return mixed
         */
        public function handle($request, Closure $next)
        {
            $response = $next($request);
            $IlluminateResponse = 'Illuminate\Http\Response';
            $SymfonyResopnse = 'Symfony\Component\HttpFoundation\Response';
            $headers = [
                'Access-Control-Allow-Origin' => '*',
                'Access-Control-Allow-Methods' => 'POST, GET, OPTIONS, PUT, PATCH, DELETE',
                'Access-Control-Allow-Headers' => 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Authorization , Access-Control-Request-Headers',
            ];
            
            if($response instanceof $IlluminateResponse) {
                foreach ($headers as $key => $value) {
                    $response->header($key, $value);
                }
                return $response;
            }
            
            if($response instanceof $SymfonyResopnse) {
                foreach ($headers as $key => $value) {
                    $response->headers->set($key, $value);
                }
                return $response;
            }
            
            return $response;
        }
    }

而我在lumen的bootstrap/app.php middlewareApp中调用Middleware：

     $app->middleware([
        App\Http\Middleware\CorsMiddleware::class
    ]);

当我在 fetch 中删除标题时，它工作得很好，但它以 application/x-www-form-urlencoded 的形式发送数据，所以我必须添加 "Content-type ":"application/json" ...有什么帮助吗？

【问题讨论】：

标签： laravel vue.js cors fetch lumen

【解决方案1】：

我在 Lumen 中尝试过的这段代码运行良好

    $headers = [
        'Access-Control-Allow-Origin'      => '*',
        'Access-Control-Allow-Methods'     => 'POST, GET, OPTIONS, PUT, DELETE',
        'Access-Control-Allow-Credentials' => 'true',
        'Access-Control-Max-Age'           => '86400',
        'Access-Control-Allow-Headers'     => 'Content-Type, Authorization, X-Requested-With',
    ];

    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;

【讨论】：

是的，我必须在 $ headers 之后去$response = $next($request);