Vue2.0使用Axios实现跨域访问（解决跨域问题）

置顶 James_liPeng

已于 2022-12-07 15:50:56 修改

阅读量8.9k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Vue2 文章标签： vue 跨域 axios

于 2019-01-09 14:30:18 首次发布

本文链接：https://blog.youkuaiyun.com/James_liPeng/article/details/86151073

Vue2 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍如何在Vue2.0项目中利用Axios实现跨域请求，包括配置BaseUrl、设置请求头、修改config文件夹下的index.js以实现代理，以及如何在代码中正确发出请求。

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

Vue2.0使用Axios实现跨域访问

配置BaseUrl
在main.js中，配置下我们访问的Url前缀：

axios.defaults.baseURL = '/api' // 开发本地代理
axios.defaults.headers.post['Contenst-Type'] = 'application/json;'
axios.defaults.headers.common['token'] = store.state.token

配置代理
修改config文件夹下的index.js文件，在proxyTable中加上如下代码：

    proxyTable: {
      '/api': {  //代理地址
        target: 'http://xxx.xxx.xxx.xxx:8088',  //需要代理的地址， 实际生产环境需要访问的地址
        changeOrigin: true,  //是否跨域
        secure: false,
        pathRewrite: {
          '^/api': '/'   //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉
        }
      }
    },

修改请求Url

    this.$axios.get("/test/test123") 
	.then(res=>{
		console.log(res)
	})
	.catch(err=>{
		console.log(err)
	})

给url加上了前缀/api，我们访问"/test/test123"就当于访问了：localhost:8080/api/test/test123