Cors 仅在发送时发出 headers

Question

我在 http://localhost:8080 上安装了 vueJS 运行，在 [上安装了 Lumen API 运行http://stockprise.test/。我想从 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;
            }
          );
        }

但随后出现以下错误：

这是流明中 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 中删除 headers 时，它工作得很好，但它以 application/x-www-form-urlencoded 的形式发送数据，所以我必须添加 "Content-type":"application/json" ...有什么帮助吗？

Answer 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;

Cors 仅在发送时发出 headers

Cors issues only when send headers

fetch

cors

laravel

vue.js

lumen