当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同时就会造成跨域。
跨域问题一般有两种解决思路：
正向代理：“一台代理服务器"代替了"客户端”，去和"目标服务器"进行交互，即代理客户端。
用途：隐藏客户端真实IP，突破限制访问外国网站。例如vue项目中配置proxy代理。
反向代理：“一台代理服务器"代替了"目标服务器”，去和"客户端"进行交互，即代理服务端
用途：隐藏服务器真实IP，提供负载平衡，即指向后端的多台服务器中空闲的一台；例如nginx配置反向代理。
配置config文件夹下的index.js文件中的 “proxyTable ” 项。
访问地址：http://localhost:8080
浏览器显示路径 http://localhost:8080/index
通过反向代理后真实的路径 http://172.0.0.1:8700/index
vue proxy反向代理替换的只是原请求地址的域名，不是标识符之前的所有内容。
（1）访问地址反向代理
直接使用http://localhost:8080访问请求的接口是无效的。
（2）请求地址反向代理
图中 proxy_pass 是后台电脑请求ip地址及端口和识别标识符，/weixinapi是标识符，当检测到请求路径里的/weixinapi/的时候proxy_pass将代替这个标识符之前的内容，
浏览器显示请求路径 http://localhost/weixinapi/demandpagelecturedemand
通过反向代理后的真实路径 http://172.0.0.1:8711/weixinapi/demandpagelecturedemand
两种代理有以下区别：
访问地址不同，这个可以通过nginx配置成相同的
替换的方式不同
vue proxy是直接把标识符之前的内容直接替换，nginx是要根据后台的实际情况来处理，有可能是直接把标识符及之前的内容都替换掉，也有可能是只替换标识符之前的内容。
前端小白一枚，在开发一个 vue 项目，之前开发的时候遇到了跨域问题，通过网上冲浪自己配置了 vue 代理，美滋滋的认为一劳永逸了。 vue 代理配置如下：
在 vue.config.js 中配置
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
target： 接口域名；
changeOrigin： 如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求；
pathRewrite： 如果接口中是没有api的，那就直接置空（如上）。如果接口中有api，就需要写成{‘^/api’:‘/api’}
但是！当开完成在服务器上部署的时候，又通过网上冲浪了解到 nginx 也要配置代理，这我就迷糊了，怎么两个代理。
然后仍然要通过网上冲浪查找答案，这时我才明白，原来 vue.config.js 中配置的代理只是解决了开发环境的跨域，上线时需要配置 nginx 代理！
在 nginx.conf 中的配置
location / {
root /nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_next_upstream http_500 http_502 http_503 http_504 error timeout invalid_header;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:8123; #代理的ip
expires 24;
}
root /nginx/html;
location ^~/reqInfo {
try_files $uri $uri/ /reqInfo /index.html;
}
//host
127.10.10.99 oa.my.com
//nginx
server {
listen 8080;
server_name oa.my.com;
location /{
proxy_pass 127.10.10.99/;
}
}
配置的host相当于给本地dns服务加了一条解析记录，也就是让 oa.my.com这个域名指向127.0.0.1这个ip
下面那个是反向代理，你可以理解成当请求到达本机的时候，如果是oa.my.com这个名字就转发给127.10.10.99去处理
