Nginx部署Nuxt应用后nuxt-mail发邮件报CORS错误如何解决

核心问题排查 #

你遇到的问题由两个错误配置导致：

1. Nginx 443端口的/mail/send/路由仅配置了CORS头，未将请求转发到后端Nuxt服务，导致请求无响应
2. Nuxt配置中axios的baseURL写死为VPS IP，与站点域名不同源触发跨域限制，且IP的HTTPS证书不匹配会额外导致请求失败

具体修改方案 #

1. 修改Nginx配置

替换443端口下的location /mail/send/块为如下配置，补全请求转发规则，同时给OPTIONS请求的CORS头增加always参数（Nginx默认204响应不会返回无always标记的自定义头，会直接导致预检失败）：

location /mail/send/ {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_redirect off;
    proxy_pass http://nuxt_app:3000;

    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
    if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
    }
    if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
    }
}

同时可以删除80端口下冗余的location /mail/send块，80端口所有请求都会重定向到443，该配置不会生效。修改完成后执行nginx -s reload重载配置。

2. 修改Nuxt配置

打开nuxt.config.js，修改axios配置项，改为站点域名即可，也可以直接删除baseURL配置，自动使用同域相对路径避免跨源：

axios: {
  baseURL: "https://studioagnc.com"
}
// 或者直接删除baseURL字段，前端会自动用当前站点域名发起请求

修改完成后重启Nuxt服务，清空浏览器缓存后测试即可。

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