vue项目代理配置+使用nginx部署的请求代理配置

由于vue项目的前后端分离，代码里的请求基本上都会涉及跨域，所以有必要在项目中配置代理地址。如果是使用nginx部署前端项目，而接口是运行在其他服务上的，那么nginx同样也需要配置代理，当然，如果前端项目跟接口是运行在同一个服务上，这种情况就只需要配置开发环境就行。
以下是使用nginx部署打包好的vue项目，而后端接口使用其他服务部署的vue配置以及nginx配置

开发环境

使用vue-cli2版本创建的vue项目

在 config/index.js 文件内配置以下代码

module.exports = {
	dev: {
		proxyTable: {
			'/api':{
				// 目标地址
				target:'http://10.200.8.55:8080',
				// 是否允许跨域
				changeOrigin:true,
				// 将路径中的 '/api' 替换成 ''
				pathRewrite: {
					'^/api': ''
				}
			}
		}
	},
	...
}

使用vue-cli3版本创建的vue项目

在 vue.config.js 中配置以下代码

参考vue cli官方文档

// vue.config.js
module.exports = {
    // 选项...
    devServer: {
        proxy: {
            '/api': {
                // 目标地址
                target: 'http://172.16.100.231:8088',
                ws: true,
                // 设置允许跨域
                changeOrigin: true,
                pathRewrite: {
                    //把访问路径中的/api替换掉
                    '^/api': ''
                }
            }
        }
    },
    ...
}

项目中请求的地址

url: '/api/...'

生产环境

使用nginx部署项目

server {
	#监听端口
	listen       80;
	#服务运行地址
	server_name  127.0.0.1;
	
	#charset koi8-r;
	#access_log  logs/host.access.log  main;
	
	#设置允许跨域
	#add_header Access-Control-Allow-Origin *;
	#add_header Access-Control-Allow-Methods POST,GET,OPTIONS;
	#add_header Access-Control-Allow-Headers Authorization;
	
	#静态资源目录
	root home/dist;
	
	location / {
		index index.html index.htm;
		#配合vue-router的history模式
		try_files $uri $uri/ @router;
	}
	#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
	#因此需要rewrite到index.html中，然后交给路由在处理请求资源
	location @router {
		rewrite ^.*$ /index.html last;
	}
	#vue项目中的请求地址前面都需要加上api
	#发起请求的代理配置，地址包含/api的回全部替换地址并转发到proxy_pass下的地址
	location /api/ {
		rewrite ^/b/(.*)$ /$1 break;
		proxy_pass http://172.16.100.231:8088/;
	}
	...
}