调用第三方API遇CORS跨域问题求助：Laravel后端实现及前端报错

我太懂你这种头疼了——明明自己的后端已经做了代理去请求Riot的API，结果前端还是被CORS政策拦住。其实问题根本不在Riot那边，而是你的Laravel后端没有给前端返回允许跨域的响应头，浏览器自然就拦截了请求。下面给你几个实用的解决办法：

方法1：用第三方CORS包（最省心） #

Laravel生态里有专门处理CORS的成熟包，比如barryvdh/laravel-cors，几步就能搞定：

• 先在项目根目录执行命令安装包：

  composer require barryvdh/laravel-cors
  

• 发布配置文件：

  php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"
  

• 打开生成的config/cors.php，根据你的需求配置：
  重点把allowed_origins改成你的前端地址http://localhost:8080，同时把你的/getSummoner路由加到paths里，比如：

  'paths' => ['/getSummoner'],
  'allowed_origins' => ['http://localhost:8080'],
  'allowed_methods' => ['*'],
  'allowed_headers' => ['*'],
  

  （生产环境别用*允许所有源，一定要指定具体域名）
• 最后去app/Http/Kernel.php，把\Barryvdh\Cors\HandleCors::class加到$middlewareGroups的api数组里，这样所有API路由都会自动带上CORS头。

方法2：手动写CORS中间件（不用第三方包） #

如果你不想依赖第三方包，自己写个中间件也很简单：

• 先创建中间件：

  php artisan make:middleware Cors
  

• 打开app/Http/Middleware/Cors.php，修改handle方法，添加跨域响应头：

  public function handle(Request $request, Closure $next)
  {
      // 处理OPTIONS预检请求
      if ($request->isMethod('OPTIONS')) {
          return response()->json(['status' => 'ok'], 200);
      }
  
      return $next($request)
          ->header('Access-Control-Allow-Origin', 'http://localhost:8080')
          ->header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
          ->header('Access-Control-Allow-Headers', 'Content-Type');
  }
  

• 注册中间件：去app/Http/Kernel.php的$routeMiddleware里加一行：

  'cors' => \App\Http\Middleware\Cors::class,
  

• 然后给你的路由加上这个中间件：

  Route::get('/getSummoner', 'RiotController@getSummoner')->middleware('cors');
  

最后小提醒 #

不管用哪种方法，一定要确保后端能正确响应OPTIONS请求——浏览器在发送复杂请求前会先发这个预检请求，如果后端没处理，还是会触发CORS错误。上面两种方法都已经帮你处理了这个问题，放心用就行。

内容的提问来源于stack exchange，提问作者Onyx