同主机下Nuxt 3与Express API服务器的CORS错误排查

问题根源 #

这个错误不是传统的CORS配置问题，而是浏览器私有网络访问（Private Network Access）的安全限制：

• 当页面运行在非安全上下文（HTTP）的公网地址（比如你的http://147.182.204.161:8080）时，现代浏览器会阻止它向本地私有地址空间（比如localhost:8081）发起请求，这是为了防止恶意网站访问用户本地网络资源。
• 本地运行正常是因为Nuxt和Express都在localhost下，属于同一私有地址空间，浏览器不会触发该限制；部署后Nuxt暴露在公网IP，跨地址空间的请求直接被浏览器拦截，甚至不需要发送到Express服务器，所以即使Express没运行也会报错。

解决方案 #

1. 用反向代理统一域名/端口（推荐生产环境）

通过Nginx或其他反向代理工具，把Nuxt和Express的请求统一到同一个域名下，避免跨地址空间的请求：

• 配置Nginx将/api路径转发到Express的8081端口，其他路径转发到Nuxt的8080端口。
• Nginx示例配置：

server {
    listen 80;
    server_name your-domain.com; # 替换成你的域名

    # 处理Nuxt页面请求
    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 处理API请求转发到Express
    location /api {
        proxy_pass http://localhost:8081;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

• 修改Nuxt中的请求代码，直接请求相对路径：

const response = await $fetch('/api/test')
console.log('response:', response);

2. 配置HTTPS（安全上下文）

如果必须保留分开的端口，给Nuxt配置HTTPS（安全上下文）：

• 用Let's Encrypt等工具获取免费SSL证书，配置Nginx或直接在Nuxt/Express中启用HTTPS。
• 当页面在HTTPS（安全上下文）下访问时，浏览器会允许向私有地址发起请求，但会弹出授权提示，用户确认后即可正常访问。

3. 临时关闭浏览器安全限制（仅测试用）

如果只是临时测试，可以修改浏览器配置绕过该限制，但绝对不能用于生产环境：

• Chrome：地址栏输入chrome://flags/#block-insecure-private-network-requests，设置为Disabled，重启浏览器。
• Firefox：地址栏输入about:config，搜索network.security.block_insecure_private_network_requests，设置为false。

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