如何在Laravel 8中配置CORS以调用Google Translate API

问题根源 #

你遇到的跨域报错和你当前配置的Laravel CORS规则无关。
Laravel内置的CORS配置作用是控制其他域名是否允许跨域请求你的Laravel服务，而你现在的场景是本地前端从http://127.0.0.1:8000主动请求第三方服务https://translate.googleapis.com，跨域限制是Google翻译接口的响应头没有声明允许你的域名访问，修改你自己服务的CORS配置无法解决这个问题。

可行解决方案 #

方案1：通过Laravel做代理转发（推荐，生产/开发都可用） #

后端发送HTTP请求不存在浏览器同源策略限制，你可以在自己的Laravel服务里加一层代理，前端先请求你自己的接口，再由Laravel转发请求到Google翻译接口，最后把结果返回给前端。
具体操作步骤：

1. 新增路由，在routes/api.php中添加：

use App\Http\Controllers\TranslateController;

Route::get('/translate', [TranslateController::class, 'proxy']);

2. 新建控制器app/Http/Controllers/TranslateController.php，代码如下：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;

class TranslateController extends Controller
{
    public function proxy(Request $request)
    {
        // 校验必要参数
        $request->validate([
            'sl' => 'required|string',
            'tl' => 'required|string',
            'q' => 'required|string',
        ]);

        // 转发请求到Google翻译接口
        $googleResponse = Http::get('https://translate.googleapis.com/translate_a/single', [
            'client' => 'gtx',
            'sl' => $request->sl,
            'tl' => $request->tl,
            'dt' => 't',
            'q' => $request->q
        ]);

        // 把Google的响应原样返回给前端
        return response($googleResponse->body(), $googleResponse->status())
            ->header('Content-Type', 'application/json');
    }
}

3. 前端修改请求地址为你的Laravel代理接口即可，比如原来的请求地址改成http://127.0.0.1:8000/api/translate?sl=id&tl=en&q=xxx。

方案2：本地开发临时绕过 #

如果只是本地调试用，可以安装浏览器CORS禁用插件，或者启动浏览器时关闭同源安全策略，该方案仅适用于本地开发，无法在生产环境使用。

方案3：no-cors模式（不推荐） #

按照报错提示把请求的mode设置为no-cors，但该模式下你无法获取响应的具体内容，仅适合不需要读取返回结果的场景。

额外提醒 #

你当前的Laravel CORS配置中allowed_headers设置为空数组，如果后续有其他域名需要跨域请求你的Laravel接口，需要把该项修改为['*']，否则会出现跨域请求头不被允许的报错。

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