nginx反向代理后js报跨域错误，本质是静态资源路径不一致导致浏览器同源策略拦截，而非接口cors问题；需确保所有js/css等静态文件均由nginx统一提供、使用相对路径或同域绝对路径，并正确配置mime.types和content-type响应头。
直接在 Nginx 反向代理后，前端页面加载 JS 文件报“跨域”错误（如 Cross-Origin Script Error 或控制台提示 Failed to load resource: net::ERR_FAILED），通常不是接口跨域问题，而是 静态资源本身被浏览器判定为跨源加载。新手容易误以为是后端接口配置错了，其实根源在资源路径和 Nginx 服务暴露方式上。
确认是不是真“脚本跨域”而非接口跨域
先看浏览器控制台报错的完整 URL：
- 如果报错地址是
/js/app.js、/static/main.css、/favicon.ico这类路径 → 属于静态资源加载失败，和 CORS 无关； - 如果报错地址是
/api/login、/v1/users这类带业务前缀的接口 → 才是真正的跨域请求问题，需查响应头和预检。
脚本跨域错误本质是：浏览器发现当前页面地址（比如 https://test1.com）与它试图加载的 JS 文件地址（比如 http://localhost:8080/static/app.js）协议、域名或端口不一致，直接拒绝执行 —— 这属于同源策略对 <script src="..."></script> 的拦截，Nginx 无法用 Access-Control-Allow-Origin 修复，因为浏览器压根不发请求。
检查前端资源是否通过 Nginx 统一提供
正确做法是：所有 HTML、JS、CSS、图片等静态文件，都由 Nginx 直接 serve，而不是让前端开发服务器（如 vite dev server、webpack-dev-server）单独运行并被页面直连。否则就会出现：
- 页面从
https://test1.com加载，但 JS 却从http://127.0.0.1:3000加载 → 跨域； - 页面从
https://test2.com加载，但 JS 引用的是相对路径./dist/app.js，而 Nginx 没配好root或alias，返回 404 → 浏览器显示“跨域”实为“加载失败”。
✅ 正确配置示例（Nginx 提供前端静态文件）：
listen 80;
server_name test1.com test2.com;
root /var/www/frontend/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
排查 script 标签中的 src 地址是否写死外部地址
常见低级错误：
- HTML 中写了
<script src="http://localhost:3000/js/chunk-vendors.js"></script>→ 部署后必然跨域； - 构建配置中
publicPath设为"http://localhost:3000/"，导致所有资源路径带本地地址； - 环境变量误用，开发环境用了绝对 URL，生产未切换。
? 解决方法：
- 构建时设
publicPath: "./"（相对路径）或"/"（根路径）； - 确保 HTML 中所有
src、href是相对路径或同域绝对路径（如/js/app.js）； - 用浏览器 Network 面板查看每个 JS 请求的 Initiator 和 Request URL，确认来源是否异常。
验证 Nginx 是否正确处理了静态资源 MIME 类型和缓存头
即使路径对，若 Nginx 返回了错误的 Content-Type（如把 .js 当作 text/plain），现代浏览器也会拒绝执行，并报类似跨域的安全警告。
✅ 确保 nginx.conf 包含：
include mime.types;
default_type application/octet-stream;
# 必须有 mime.types，否则 .js/.css 无正确 type
}
同时检查响应头中 Content-Type: application/javascript 是否存在（可通过 curl 或 Network 面板查看）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
