React+Webpack项目跨域遇bundle.js缺失问题（Docker+Nginx环境）

1. 静态资源路径配置错误 #

Webpack打包时publicPath设置不当是这类问题的高发原因：

• 检查域名A的webpack.config.js，确保output.publicPath设为域名A的绝对路径（如https://domainA.com/）或根路径/——如果设为相对路径（比如./），从域名B跨域访问A的页面时，浏览器会从B的域名下请求bundle.js，必然找不到。
• 验证Docker容器内Nginx的root目录是否指向Webpack打包后的dist文件夹，示例配置：

server {
    root /usr/share/nginx/html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

2. Nginx跨域配置存在疏漏 #

即使配置了CORS头，也可能因细节缺失失效：

• 未处理OPTIONS预检请求：浏览器发送跨域POST/PUT等请求前会先发OPTIONS请求，需Nginx正确响应并返回CORS头，示例配置：

location /api {
    if ($request_method = OPTIONS) {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
        add_header Access-Control-Allow-Headers Content-Type,Authorization;
        return 204;
    }
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
    add_header Access-Control-Allow-Headers Content-Type,Authorization;
    proxy_pass http://api-service;
}

• 注意：如果是跨域加载域名A的页面而非API，需在静态资源的location块中也配置CORS头，确保bundle.js等文件的响应携带跨域允许头。

3. Docker网络与端口映射异常 #

• 确认域名A的Docker容器端口已正确映射到宿主机，且Nginx监听端口与容器暴露端口一致。
• 若为容器间访问，检查两个容器是否在同一Docker网络，确保域名A的服务能被域名B的容器正常访问；若为外部浏览器访问，验证域名A的DNS解析是否正常，直接访问域名A的bundle.js路径（如https://domainA.com/bundle.js）确认能加载。

4. 浏览器缓存或同源策略误解 #

• 清除浏览器缓存，旧缓存可能导致路径匹配错误。
• 明确请求场景：如果是从域名B的页面加载域名A的完整页面，CORS头仅针对AJAX请求，页面跨域加载需用iframe等方式，而bundle.js缺失本质是路径配置问题（参考第1点）；如果是从B的API请求A的API，需确保请求目标是A的API接口而非页面资源。

5. Webpack打包产物不完整 #

• 进入域名A的Docker容器，执行ls /usr/share/nginx/html（对应Nginx root目录），确认bundle.js等打包产物存在，且打包过程无报错。

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