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 => {

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

转载请注明来自:爱前端

发表评论

电子邮件地址不会被公开。 必填项已用*标注