vue应用部署到测试环境，一直报sockjs-node跨域，如何处理？

Question

vue+webpack构建的前端项目，配置可见https://www.imooc.com/article/29504
目前存在的问题是：本地启动应用，未出现http://localhost:8080/sockjs-node/info?t=xxx问题,但是当打包后，部署后的前端地址为10.181.12.125:30016 导致sockjs-node一直报错，采用的部署方式为 通过npm run build打包后 dockerfile执行 npm run start即 “webpack-dev-server --config build/webpack.dev.conf.js” 请问这个问题要如何修复

Answer 1

你 npm run start 是启动了一个 dev 服务，这个服务看起来是监听的 8080 端口，所以热更新也是8080 端口。但是你实际的服务地址经过了转发，dev 服务对这件事是不知道的，所以页面进行热更新时出现了 8080 和 30016 不一致导致跨域的问题。

这里的问题是：你不应该在测试环境、正式环境使用 dev 服务。也就是你不应该使用 npm run start 启动服务，而需要使用 nginx 或者其他的程序将你打包后的静态资源提供出去。

Answer 2

服务端或者nginx需要进行跨域配置,如果有nginx,按照这个进行跨域配置

 server {
        listen       80;
        server_name  localhost;
        location ~* (\.do)$ {
           add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
            add_header Access-Control-Allow-Credentials 'true';
            add_header 'Access-Control-Allow-Headers' 'Accept, Authorization,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            if ($request_method = 'OPTIONS') {
               add_header 'Access-Control-Allow-Origin' *;
               add_header 'Access-Control-Max-Age' 1728000;
               add_header 'Access-Control-Allow-Credentials' 'true';
               add_header 'Access-Control-Allow-Methods' 'GET, POST, DELETE, PUT, OPTIONS';
               add_header 'Access-Control-Allow-Headers' 'Accept, Authorization,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
               add_header 'Content-Type' 'text/plain charset=UTF-8';
               add_header 'Content-Length' 0;
               return 204;
           }
        }
 }

Answer 3

从你提供的截图中可以看到，问题主要是关于跨域资源共享（CORS）以及资源无法找到（404 Not Found）。出现这样的错误可能是由于几个原因：

1. CORS 配置问题：前端请求的资源没有正确配置 CORS 响应头，导致浏览器出于安全考虑阻止了这些请求。解决这个问题需要在服务器端添加适当的 Access-Control-Allow-Origin 响应头。如果你使用 Nginx，可以在配置中添加类似下面的配置：

   location / {
       add_header 'Access-Control-Allow-Origin' '*';  # 仅为示例，实际部署时应更严格
       add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
   }

2. 资源不存在（404）：请求的资源地址不正确，或者所请求的资源在服务器上实际不存在。由于你的应用还在尝试连接到 sockjs-node，这表明可能你在生产环境中错误地使用了开发环境的配置。在生产环境中不应该尝试连接到 webpack-dev-server 的 sockjs-node。
3. 生产环境配置错误：通常，生产环境的构建配置不应包含指向 webpack-dev-server 的链接。你需要确保生产环境的构建脚本中没有包含这种开发环境特有的配置。

解决步骤

1. 检查并修改 webpack 配置：

   • 确保生产环境的 webpack 配置文件（通常是 webpack.prod.conf.js）没有引入任何 webpack-dev-server 相关的内容。
   • 检查 publicPath 和其他输出设置是否正确设置以符合你的生产环境。

2. 更新 Docker 配置：

   • 确认 Dockerfile 设置正确，如前所述，确保用于生产的 Dockerfile 配置使用了 Nginx 或其他适当的服务器软件。
   • 确保你的服务器配置文件（如 Nginx 配置）正确设置了 CORS 响应头和其他必要的安全措施。

3. 重新构建和部署：

   • 在修改完以上配置后，重新运行构建命令 npm run build 并重新部署应用。

如果你需要更详细的帮助来调整具体的配置文件，可以进一步提供信息，我会尽量提供更具体的指导。