Vue开发环境与生产环境使用代理解决跨域的方法 / 配置多个后台接口地址

1. 生产环境跨域/多个后台地址

开发环境中配置proxy代理, vue自带的转发请求的方式, 只在开发环境中生效.

proxyTable: {
        '/fnc': {
          target: 'http://152.136.194.152:8006/',
          changeOrigin: true, // -> 指示是否跨域
          ws: true,
          pathRewrite: {
            '^/fnc': '/api' // -> 可以使用 /fnc 等价于 后台接口的/api
          }
        },
        '/api': {
          target: 'http://192.168.0.134:8005/',
          changeOrigin: true,
          ws: true,
          pathRewrite: {
            '^/api': '/api'
          }
        }
      }

2. 生产环境跨域/多个后台地址

生产环境中配置nginx代理, 在生产环境中, 由nginx转发请求.

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        #     root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
	    root  /usr/share/nginx/mobile/dist;
	    index index.html;
        }
		
		# 前端请求地址配置
		location /api {
            proxy_pass   http://127.0.0.1:8004/api;
            proxy_redirect default;
            proxy_set_header Host 127.0.0.1;
            proxy_set_header X-Real-IP $remote_addr;
        }
		
        location /fnc {
            proxy_pass http://152.136.194.152:8006/api;
        }

		# 后台程序
       location /file {
            alias /root/CloudSignApproval/UserFile/;
            index input.txt;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }