使用proxy解决Vue前端axios跨域问题

2021-04-28   阅读:2353   类型:前端   分类:Vue    标签: Vue

6.png

跨域方式怎么解决呢?我们可以使用proxy。

如果你的前端应用和后端API服务器没有运行在同一个主机上,你需要在开发环境下将API请求代理到API服务器。这个问题(说白了就是跨域的解决方案)可以用个vue.config.js中的devServer.proxy选项来配置。

devServer.proxy可以是一个指向开发环境API服务器字符串:
module.exports = {
devServer:{
     proxy: ‘http://localhost:4000’//这里假设项目端口号非4000,而后端端口号为4000,从而造成了跨域
    }
}

我们打开项目,在vue.config.js添加如下代码:

module.exports = {
devServer:{
      proxy: ‘http://localhost:4000’//这里假设项目端口号非4000,而后端端口号为4000,从而造成了跨域
    }
}

666.png

然后前面axios请求就不需要加上域名了

999.png

axios.get(/getdata).then(function(response){
    console.log(response)
    }).catch(function(error){
    console.log(error)
})

上面那种方式只是针对单个接口的描述,也可以说是一种简写方式,但是我们做项目有时对接的可能是多个平台接口的形式,完整且多个接口的写法:

vue.config.js中的proxy配置:

module.exports = {
devServer:{
   proxy: {
      '/api’{
                      target:’ http://localhost:4000’,
                      changeOrigin:true,
                       pathRewrite:{
                       '^/api’:"/”
                }
         },
    '/foo'{
                      target:'<other_url>',
        }
     }
   }
}

Axios请求接口

axios.get(/api/getdata).then(function(response){
    console.log(response)
}).catch(function(error){
    console.log(error)
})
腾讯云11.11上云拼团Go,2核2G3M云服务器 28元/年

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/669.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×