【跨域代理】Vue proxy正向代理 及与nginx反向代理的区别

前言

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同时就会造成跨域。

跨域问题一般有两种解决思路：

• 正向代理：“一台代理服务器"代替了"客户端”，去和"目标服务器"进行交互，即代理客户端。
  用途：隐藏客户端真实IP，突破限制访问外国网站。例如vue项目中配置proxy代理。
• 反向代理：“一台代理服务器"代替了"目标服务器”，去和"客户端"进行交互，即代理服务端
  用途：隐藏服务器真实IP，提供负载平衡，即指向后端的多台服务器中空闲的一台；例如nginx配置反向代理。

1.vue本地项目proxy正向代理

配置config文件夹下的index.js文件中的 “proxyTable ” 项。

访问地址：http://localhost:8080
浏览器显示路径 http://localhost:8080/index
通过反向代理后真实的路径 http://172.0.0.1:8700/index
vue proxy反向代理替换的只是原请求地址的域名，不是标识符之前的所有内容。

2.nginx反向代理

（1）访问地址反向代理


通过localhost 反向代理访问地址 http://localhost:8080
直接使用http://localhost:8080访问请求的接口是无效的。
（2）请求地址反向代理

图中 proxy_pass 是后台电脑请求ip地址及端口和识别标识符，/weixinapi是标识符，当检测到请求路径里的/weixinapi/的时候proxy_pass将代替这个标识符之前的内容，
浏览器显示请求路径 http://localhost/weixinapi/demandpagelecturedemand
通过反向代理后的真实路径 http://172.0.0.1:8711/weixinapi/demandpagelecturedemand

3.总结

两种代理有以下区别：

• 访问地址不同，这个可以通过nginx配置成相同的
• 替换的方式不同
  vue proxy是直接把标识符之前的内容直接替换，nginx是要根据后台的实际情况来处理，有可能是直接把标识符及之前的内容都替换掉，也有可能是只替换标识符之前的内容。

---

终于搞懂了VUE的代理和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;
}

---

Nginx反向代理 本地配置host的区别

//host
    127.10.10.99 oa.my.com
    
    //nginx
    server {
        listen       8080;
        server_name  oa.my.com;

        location /{
             proxy_pass   127.10.10.99/;
        }
      }

解析

1. 配置的host相当于给本地dns服务加了一条解析记录，也就是让 oa.my.com这个域名指向127.0.0.1这个ip
2. 下面那个是反向代理，你可以理解成当请求到达本机的时候，如果是oa.my.com这个名字就转发给127.10.10.99去处理