Vue项目中关于axios跨域的设置

魍-

于 2018-12-03 22:16:57 发布

阅读量302

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端 axios跨域

本文链接：https://blog.csdn.net/qq_38722097/article/details/84780690

web前端同时被 2 个专栏收录

28 篇文章

订阅专栏

axios跨域

1 篇文章

订阅专栏

本文详细介绍如何在Vue项目中通过配置index.js文件实现跨域代理，解决开发中常见的跨域问题。具体步骤包括设置proxyTable选项，指定target、changeOrigin、secure及pathRewrite参数，确保前后端联调顺畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在config文件夹中的index.js文件我们要将proxtTable选项设置。参数如下

proxyTable: {
   '/api': {
       target: 'http://192.168.1.xxx:80', // 数据接口
       changeOrigin: true, // 跨域
       secure: false,
       pathRewrite: {
           '^/api': ''
       }
   }
},

target项即是我们要将请求发送的靶向目标。而此选项则可以理解为我们的node后台为我们作了一次正向代理，以此避免了跨域

同时我们再发送请求的时候还需要注意一点

this.$axios.post('/api/xxxx)
.then(res=>{
	....
})
.catch(err=>{
	....
})

注意！务必要加上/api前缀！没有它我们没办法完成上述的代理

当然，我的axios选项写成这个样子是因为我在main.js中引入axios的同时还加了$axios方法。所以才可以这样写。这个各人跟各人不一样，大家批判性吸收

import Axios from 'axios'
Vue.prototype.$axios = Axios