仅在发送标头时出现 Cors

Posted 2023-03-04

【中文标题】仅在发送标头时出现 Cors

【英文标题】：Cors issues only when send headers

【发布时间】：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:'[e-mail]',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" ...有什么帮助吗？

【参考方案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);