如何将Vue开发环境devServer配置转换为生产环境配置以解决跨域（CORS）问题

哥们，我来帮你捋清楚问题出在哪，以及怎么彻底解决生产环境的跨域问题：

核心问题拆解 #

你的代码在本地能跑通，到生产环境就挂，主要是这几个原因：

• 本地Vue CLI的devServer.proxy是开发环境专属的代理工具，只有npm run serve时才生效，打包部署后这个代理层直接消失了。
• 请求里硬编码的http://localhost:8080，部署到服务器后会指向服务器本地（不是你的前端页面域名），完全不对。
• mode: "no-cors"是个大坑：这个模式下浏览器会强制限制你读取响应内容，根本不是解决CORS的正确方式，反而会让你拿不到数据。
• 你在请求里设置Access-Control-Allow-Origin完全没用——这个响应头是服务器返回给客户端的，不是客户端发给服务器的。

分步解决方案 #

1. 修正前端请求代码 #

把硬编码的地址改成相对路径，同时删掉错误的配置：

第一个请求修改后：

this.$http
  .get("/one/token/" + this.contractAddress, {
    gzip: true
  })

第二个请求修改后：

this.$http
  .get("/two/token/" + this.contractAddress, {
    gzip: true
  })

这样部署后，请求会自动以当前页面的域名/IP为基础发送，比如你的服务器IP是192.168.1.100，请求就会变成http://192.168.1.100/one/token/xxx。

2. 在生产服务器配置反向代理（以Nginx为例） #

生产环境需要用Web服务器（比如Nginx）代替Vue CLI的devServer做代理转发，因为服务器端的请求不存在跨域限制。

假设你的静态文件部署在/var/www/html，修改Nginx配置文件（通常是/etc/nginx/sites-available/default或/etc/nginx/nginx.conf）：

server {
    listen 80;
    server_name 你的服务器IP或域名;

    root /var/www/html;
    index index.html;

    # 处理SPA前端路由（如果你的项目是单页应用的话）
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 代理etherscan的请求
    location /one/ {
        proxy_pass https://etherscan.io/;
        # 自动去掉请求路径里的/one前缀
        rewrite ^/one/(.*)$ /$1 break;
        # 设置代理头，模拟浏览器请求避免被目标网站拦截
        proxy_set_header Host etherscan.io;
        proxy_set_header Referer https://etherscan.io/;
        proxy_set_header User-Agent $http_user_agent;
    }

    # 代理bscscan的请求
    location /two/ {
        proxy_pass https://bscscan.com/;
        rewrite ^/two/(.*)$ /$1 break;
        proxy_set_header Host bscscan.com;
        proxy_set_header Referer https://bscscan.com/;
        proxy_set_header User-Agent $http_user_agent;
    }
}

配置完成后重启Nginx：

sudo systemctl restart nginx

3. 验证生效 #

重新打包前端项目，把dist目录下的文件覆盖到服务器的/var/www/html目录，然后访问你的服务器IP/域名，就能像本地一样正常请求数据了。

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