使用代理解决跨域的方式分析

1、代理为什么能解决跨域问题

代理就是一个服务，该服务的作用就是：监测本地的接口，当接口为需要访问外网的接口时，代理替你访问这个接口并把返回值返回给当前网页。

并不是网页服务访问代理，而是代理检测网页服务内部的接口服务，当符合条件的服务出现的时候，代理拦截住，并替代网页服务返回结果

 

2.webpack的代理

在测试环境下，代理是webpack帮忙做的。我们可以通过webpack-dev-server 配置相应代理设置，实现本地开发时的代理，这里许多讲使用webpack代理的文章，只提到了这么做，但是实际上这种方式都是我们测试时方便使用的，实际部署的话其实这种方式就可能比较没有意义了，那时候肯定更加倾向选择ngnix反向代理或者CORS这种方式。

 

大概的做法的话，其实就是在相应的config处，添加类似如下的代理配置，vue2，vue3的位置不一样，vue2是在config/index.js,vue3是在vue.config.js中；vue2中使用proxyTable配置代理，vue3使用proxy配置代理。

    proxy: {
      "/api": {
        target: "http://192.168.146.49:8081", // 接口地址
        ws: true, // 是否启用websockets
        changOrigin: true, //允许跨域  Origin源127.0.0.1:9000
        pathRewrite: {
          "^/api": "" //请求的时候使用这个/api前缀就可以
        }
      }
    }

 

上面的配置其内容可以表述为：当网页访问localhost：8080/api/xxxxx/xxx接口的时候，webpack会识别到这个是对外的接口并访问http://192.168.146.49:8081/xxxxx/xxx，并将结果返回(最开始天真的以为，配置完代理之后，以前的程序同源问题自动就好了，不好用还以为是配错了)

 

同时axios访问部分也是要修改的，因为如果之前没配置webpack的代理，以前的axios设置了直接访问对应的地址(当然按以前的做法 就会出现前面图上例子中 比如因为8080和8081端口不匹配导致的跨域问题)，而不是本机的地址，因此我们需要将axios的配置也设置为访问localhost:8080/api/xxxx 这种形式，这样axios当访问/api/XX/xxx的时候，就能在webpack的代理下，替换为http://192.168.146.49:8081/XX/xxx的结果。

 

当然，这样基本上都是在本地测试环境下，在部署时常用还是ngnix反向代理。

 

3、服务器环境代理的配置方案

在本机调试下，webpack帮你把脏活累活干了，那么打包之后，服务器上没有webpack了，代理怎么办呢？ngnix反向代理是网上提到的最多的方案，简单实用，轻量级，并且还可以做负载均衡。

其大概的原理简而言之就是：nginx通过proxy_pass实现了反向代理跨域（即这种方法本身是不需要ACA-系列header的），其本质也是使得请求地址和服务器同域，此时前端相当于不跨域。

其中我们需要配置一下ngnix的文件，通过改一下配置文件来实现反向代理，什么是反向代理或者安装部署网上也有很多博客进行解释了吗，这里就不赘述了。

这里主要还是看一下怎么配置，其核心就是proxy_pass部分。如下：

其中nginx-x.xx.x(对应版本号)confnginx.conf就是配置文件，里面有个server的大括号其中有：

        listen       90;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
    root        E:\dist;#vue项目的打包后的dist
        location / {
           try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        location @router {
            rewrite ^.*$ /index.html last;
        }
    location /api {
           rewrite  ^.+api/?(.*)$ /$1 break; #可选参数，正则验证地址
            include  uwsgi_params; #可选参数，uwsgi是服务器和服务端应用程序的通信协议，规定了怎么把请求转发给应用程序和返回
            proxy_pass   http://192.168.146.49:8081; #此处修改为自己的请求地址，必填
        }

 

 

其中listen为部署后的端口，不能与其他程序冲突
server_name就是部署后的url
root 即Vue程序的打包的文件位置
location location @router 是配合vue的路由的配置项
location /api 就是ngnix的代理。意思与测试环境的意思相同。
全部配置好后，运行ngnix就能启动了。

 

参考：

https://segmentfault.com/a/1190000037557209

 https://www.modb.pro/db/385782