VUE 代理服务器实现跨域

什么是跨域

  跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个3个中有一个不同就是跨域。 这里列举一个经典的列子:

协议跨域
http://a.baidu.com访问https://a.baidu.com;
#端口跨域
http://a.baidu.com:8080访问http://a.baidu.com:80;
#域名跨域
http://a.baidu.com访问http://b.baidu.com;

代理服务器实现前端跨域请求后端地址

1.config index.js下配置proxyTable


  proxyTable: { 
    '/api': { 
        target: 'https://1.2.3.4:89', // 接口地址 
        changeOrigin: true, // 是否跨域 
        pathRewrite: { 、// 转发 '^/api': '' }, 
        secure: false, 
      } 
    }

2.src/api/index.js 配置baseURL

const debug = process.env.NODE_ENV !== 'production'
const axInstance = axios.create({
    baseURL: debug ? 'api' : 'http://1.3.4.5.6:89',
    timeout: 10000,
    responseType: 'json',
    withCredentials: false, // 表示跨域请求时是否需要使用凭证
    headers: {
        token: store.state.axios.token,
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    }
})

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值