脚本宝典收集整理的这篇文章主要介绍了

Vue全家桶开发系列:通过设置webpack的proxyTable实现跨域请求

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

在使用Vue开发项目时,因为前后端分离,经常遇到跨域请求的问题,通用的方法是在后端设置Access-Control-Allow-Origin:*。但在某些特殊情况下,这个方式并不适用,这种时候,可以通过设置webpack的proxyTable进行解决(仅限于开发环境)。

代理设置

使用vue-cli创建的项目中,可以看到config/index.js文件中,proxyTable默认为空:
图片描述

首先使用一些免费的API进行测试:https://github.com/jokermonn/...

设置如下:

proxyTable: {
   '/article/today': { //访问路由
        target: 'https://interface.meiriyiwen.com', //目标接口域名
        secure: false, //https协议才设置
        changeOrigin: true, //是否跨域
   }        
}

图片描述

使用axios进行请求:

import axios from 'axios';
export default {
  name: 'App',
  mounted(){
    this.getInfos();
  },
  methods:{
    getInfos() {
      axios.get('/article/today').then((res)=>{
        console.log(res);
      })
    }
  }
}

图片描述

然而,请求失败了,报404错误!这个时候,只需要重新执行 npm run dev 即可!

这次,请求成功了,本地访问 http://localhost:8081/article/today 其实就是代理访问了https://interface.meiriyiwen....
图片描述

重写地址

现在有个问题,想要把这个请求地址写成“/api”开头,怎么办?

设置如下:

proxyTable: {
   '/api': { //访问路由
        target: 'https://interface.meiriyiwen.com', //目标接口域名
        secure: false, //https协议才设置
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api/article': '/article/today' //重写接口
        },
   }        
}

axios请求更改如下:

axios.get('/api/article').then((res)=>{
   console.log(res);
})

访问成功了:
Vue全家桶开发系列:通过设置webpack的proxyTable实现跨域请求-脚本宝典
图片描述

多项代理

如果想设置多个代理,proxyTable可以这样设置:

proxyTable: {
      '/api': { //访问路由 /api 触发
        target: 'https://interface.meiriyiwen.com', //目标接口域名
        secure: false, //https协议才设置
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api/article': '/article/today' //重写接口
        },
      },
      '/movie' : {  //访问路由 /movie 触发
          target: 'https://api.douban.com', 
          secure: false,
          changeOrigin: true, //是否跨域
          pathRewrite: {
            '^/movie': '/v2/movie/in_theaters' //原接口地址太长了,重写可以缩短些 
          }     
      }       
}

Axios请求如下:

//实际访问地址为:https://interface.meiriyiwen.com/article/today
axios.get('/api/article').then((res)=>{
   console.log(res);
});

//实际访问地址为:https://api.douban.com/v2/movie/in_theaters
axios.get('/movie').then((res)=>{
   console.log(res);
});

图片描述

没错,相信你的眼睛,请求成功了!
图片描述

总结

以上是脚本宝典为你收集整理的

Vue全家桶开发系列:通过设置webpack的proxyTable实现跨域请求

全部内容,希望文章能够帮你解决

Vue全家桶开发系列:通过设置webpack的proxyTable实现跨域请求

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过