部署在DigitalOcean的Laravel+Nuxt.js项目上传文件出现CORS跨域问题

1. 修正Nuxt配置错误 #

你当前的axios和proxy配置存在冲突，会导致请求直接绕开代理发往后端域名触发跨域，按如下修改：

modules: [
 '@nuxtjs/axios',
 '@nuxtjs/sitemap',
 '@nuxtjs/proxy',
],

axios: {
 proxy: true,
 // 仅保留路径前缀，不要填写完整后端域名，否则会跳过代理直接请求后端
 prefix: '/api'
},

proxy: {
 '/api': {
   target: 'http://api.mydomain.com',
   pathRewrite: { '^/api': '/api' },
   changeOrigin: true
 }
},

注意：@nuxtjs/proxy仅在开发环境生效，生产环境部署需要在前端站点的Web服务器（如Nginx）中添加反向代理规则，示例配置如下：

location /api/ {
    proxy_pass http://api.mydomain.com/api/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

2. 配置Laravel端CORS规则 #

Laravel默认开启了CORS校验，需要允许前端域名访问接口：

• Laravel 9及以上版本自带CORS扩展，直接修改config/cors.php即可；低版本需要先安装fruitcake/laravel-cors扩展
• 配置参考：

return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    // 生产环境请替换为你的正式前端域名，不要使用通配符*
    'allowed_origins' => ['http://你的前端部署域名'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 86400,
    // 如果接口需要鉴权、携带Cookie，此项需设为true
    'supports_credentials' => true,
];

• 修改配置后执行php artisan config:clear清除配置缓存生效。

3. 排查上传请求的特殊配置 #

文件上传请求默认采用multipart/form-data格式，如果你在前端代码中手动指定了Content-Type: multipart/form-data，请删除该配置，让浏览器自动生成带边界标识的Content-Type头，否则后端无法正常解析请求，会触发预检请求失败导致跨域报错。

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