Vue2.0使用Axios实现跨域访问(解决跨域问题)

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

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

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

  1. 配置BaseUrl
    在main.js中,配置下我们访问的Url前缀:
axios.defaults.baseURL = '/api' // 开发本地代理
axios.defaults.headers.post['Contenst-Type'] = 'application/json;'
axios.defaults.headers.common['token'] = store.state.token
  1. 配置代理
    修改config文件夹下的index.js文件,在proxyTable中加上如下代码:
    proxyTable: {
      '/api': {  //代理地址
        target: 'http://xxx.xxx.xxx.xxx:8088',  //需要代理的地址, 实际生产环境需要访问的地址
        changeOrigin: true,  //是否跨域
        secure: false,
        pathRewrite: {
          '^/api': '/'   //本身的接口地址没有 '/api' 这种通用前缀,所以要rewrite,如果本身有则去掉
        }
      }
    },
  1. 修改请求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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值