通过VUE项目的proxyTable配置实现本地跨域

1. 首先我们找一个用来实验的请求地址

(如果下面这个地址访问不了,那就是距离这篇文章发表的时间过得太久导致连接已经失效。你可以随便到某个网站找一条get请求的地址):

https://shared-https.ydstatic.com/gouwuex/ext/script/load_url_s.txt

这是一个get请求,可以通过浏览器的地址栏直接访问,返回的结果是

{"src":"https://shared-https.ydstatic.com/gouwuex/ext/script/extension_3_1.js?v=1513057776750" }

2. 错误场景复现

我们通过npm run dev命令本地启动开发环境
代码中ajax的url如下:

 this.$ajax({
        url: 'https://shared-https.ydstatic.com/gouwuex/ext/script/load_url_s.txt' // 完整的路径
      }).then(res => {
...

看到浏览器器的控制台会出现报错信息

Failed to load https://shared-https.ydstatic.com/gouwuex/ext/script/load_url_s.txt: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

大概意思就是不允许跨域请求

3. 解决方案:使用VUE项目的proxyTable配置实现本地跨域

在项目的根目录中找到config文件夹,打开里面的index.js文件
这里面分别针对dev和build进行了不同的配置
我们在dev下面修改proxyTable这个字段如下

proxyTable: {
    '/gouwuex': { // 要代理的路径前缀
        target: 'https://shared-https.ydstatic.com', //要代理的域名
        changeOrigin: true,
                },
             },

然后把ajax的请求代码改成下面这样

 this.$ajax({
        url: '/gouwuex/ext/script/load_url_s.txt'  // 这里填写路径要和上面的代理前缀保持一致
      }).then(res => {

重新启动npm run dev命令,大功告成,如果还要深入了解,请看第4部分。

4. 进阶配置:理解前缀和路径重写

如果你在网上搜索到其他文章介绍proxyTable配置的话,可能会提到一个pathRewrite字段,例如下面的代码:

proxyTable: {
      '/api': {
        target: 'http://xxxxxx.com', // 接口的域名
        secure: false,  // 如果是https接口,需要配置这个参数
        changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
        pathRewrite: {
          '^/api': ''
        }
      }
    },

secure字段的作用是是否启用安全访问限制,默认是true。如果你请求的服务器是https,同时证书是无效的状态下,就要把这个安全限制关掉,不然就会报500错误
pathRewrite字段从字面上理解就是路径重写,那么如果使用呢?
接上我之前的例子把配置修改为下面这样:

 proxyTable: {
      '/api': { // 这里不是gouwuex,也就是说,我现在要代理的是api开头的路径了
        target: 'https://shared-https.ydstatic.com',
        changeOrigin: true,
        secure: false //使用https的情况下,如果是无效证书的服务器,需要把安全限制设置为false,不然会报500
        pathRewrite: {
          '^/api': '/gouwuex/'  // 这个地方就是把api重写为gouwuex,这样我们再请求地址前缀写api的时候,实际上请求就就是gouwuex了。
        }
      },
    },

ajax的代码改成这样:

 this.$ajax({
        url: '/api/ext/script/load_url_s.txt' //前缀和代理设置的前缀保持一致
      }).then(res => {

看看现在是不是也可以正确请求了?这个配置的作用就是可以实现我们自定义任何的路径前缀来映射的到指定的接口地址。
如果还有哪个地方不理解的就在评论中给我留言吧。

至今常用的也是最实用的2种解决跨域问题的方案

本地联调的时候直接调用后端接口就会出现跨域问题;
解决跨域问题最常用的2种方案:
一、 后端接口的通过设置Access-Control-Allow-Origin为*来实现
JAVA后端代码示例:

response.setHeader("content-type", "application:json;charset=utf8");  
response.setHeader("Access-Control-Allow-Origin", "*");  
response.setHeader("Access-Control-Allow-Methods", "POST");  
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");  

二、使用反向代理的方式,可以用nginx也可以用nodejs的http-proxy或者其他后端语言都有对应的实现方案,基本原理就是本地的web服务提供一个前缀(例如:http://localhost:3000/api/)把后端的接口域名(例如:http://xxx.com/api/)代理到这个前缀上面。
nginx配置示例:

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    gzip  on;
    server {
        listen       8080;
        server_name  localhost;
        location ^~ /xjk/ { #重点在这里-匹配域名后面开头为xjk的路径
            proxy_pass   https://xjk.jr.jd.com; #要代理的域名也可以是ip地址
        }
        location / {
            root  /Users/liuxiaofan/workspace/aa/Ipos_newbusifront/src/main/resources/static; #本地根目录的地址
            #index  index.html index.htm;
            autoindex on; #打开目录浏览
            autoindex_localtime on; #打开目录浏览还要有这项
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    include servers/*;
}

前端js部分:
注意url开头的/xjk和nginx的location ^~ /xjk/ 配置对应上

 $.ajax({
            url:'/xjk/getFundSevenDayProfit.action',
 ...