跨域问题

1. vue.config.js配置文件解决

# 8082为vue端口， 8081为服务器端口
module.exports = {
  devServer: {
    port: 8082,
    // open: true, // 配置自动启动浏览器
    proxy: {
      // 配置跨域处理 可以设置多个
      '/cost': {
        // 开启跨域
        changeOrigin: true,
        // 《方案1》
        target:
          'http://10.20.16.198:8081'
        // 《方案2》
        // target:
        //   'http://10.20.16.198:8081/cost',
        // pathRewrite: {
        //   '^/cost': ''
        // }
      }
    }
  }
}

2. Nginx解决

server {
        listen       8082;
        server_name  localhost;

        location / {
            root  /Users/zilong/Desktop/h5_workspace/cost-pro/dist;
            index  index.html index.htm;
        }

        location /cost {
              proxy_pass   http://127.0.0.1:8081;
        }
}

Nginx配置时，可能会出现403问题，可能原因是Nginx没有访问文件夹的权限，通过ps命令查到Nginx登录用户名是： nobody，然后我直接给了root权限：chown -R nobody /root