Laravel中Ajax调用API遇CORS拦截及安装CORS扩展失败的解决

问题原因 #

你遇到的是浏览器同源策略导致的CORS拦截：前端直接从http://127.0.0.1:8000请求外部公开API时，目标API未返回Access-Control-Allow-Origin响应头，浏览器因此阻止请求。

解决方案 #

方案一：通过Laravel作为代理转发请求（推荐） #

绕过浏览器CORS限制的最可靠方式是让Laravel后端转发请求，前端请求同域名的Laravel接口即可：

1. 添加代理路由
   在routes/web.php或routes/api.php中新增路由：

Route::get('/proxy-external-api', function () {
    $externalApiUrl = '你的公开API完整地址';
    // 使用Laravel HTTP客户端发起请求
    $response = Http::get($externalApiUrl);
    
    // 原样返回外部API的响应
    return response($response->body(), $response->status())
        ->header('Content-Type', $response->header('Content-Type'));
});

2. 修改前端Ajax代码
   将请求地址改为上述Laravel路由：

$(document).ready(function() {
    $.ajax({
        url: "/proxy-external-api",
        method: "GET",
        dataType : "json",
        success: function(response) {
          console.log(response);
          // 处理API响应
        },
        error: function(xhr, status, error) {
          console.log("Terjadi kesalahan: " + error);
        }
      });
});

方案二：安装Laravel CORS扩展包（适用于开放自身API的CORS，调用外部API优先用方案一） #

如果你仍需使用扩展包解决，以fruitcake/laravel-cors为例，按以下步骤操作：

1. 更新Composer
   先确保Composer是最新版本，避免版本兼容问题：

composer self-update

2. 安装扩展包
   执行安装命令：

composer require fruitcake/laravel-cors

3. 发布配置文件
   生成CORS配置文件到项目中：

php artisan vendor:publish --tag="cors"

4. 注册中间件
   打开app/Http/Kernel.php，在全局中间件数组$middleware中添加：

\Fruitcake\Cors\HandleCors::class,

也可仅在特定路由组（如API路由）中启用，添加到$middlewareGroups['api']数组内。
5. 配置CORS规则
编辑config/cors.php文件，根据需求调整规则：

• allowed_origins：设置允许的请求源，开发环境可设为['*']，生产环境需指定具体域名
• allowed_methods：允许的HTTP方法，如['GET', 'POST', 'PUT']
• allowed_headers：允许的请求头

安装失败的排查方向

• 镜像问题：切换为国内Composer镜像，执行命令：

composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/

• 版本兼容：查看扩展包文档，确认与你的Laravel版本匹配，例如Laravel 6-8需安装2.x版本：

composer require fruitcake/laravel-cors:^2.0

• 网络问题：检查网络连接，或尝试切换网络环境后重新安装。

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