vue配置跨域

在vue中配置跨域问题:

一:跨域是什么?

跨域问题的出现是因为浏览器的同源策略问题。所谓同源指的是两个页面具有相同的协议(protocol),主机(host),端口(port).同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的文档或者脚本进行交互,这是一个用于隔离潜在恶意文件的重要安全机制。

二:没有同源策略限制的危险场景:

没有同源策略限制的接口请求:
没有同源策略的限制容易导致两个页面同时在被访问时,一个网页通过
后台代码进行窃取个人信息如cookie等。

三:vue中跨域问题的解决

vue将请求发送给本地服务器,本地服务器再发送给真正的后端
在config.index.js的dev中配置:

  proxyTable: {
       '/api': {
    target: 'http://XXXX:9090',//设置你调用的接口域名和端口号别忘了加http
    changeOrigin: true,    //這裡true表示实现跨域
    pathRewrite: {
      '^/api':''//在解析域名时会将api用空格代替以进行发送请求
    }
  }
 },

之后便可以使用api/user/add来进行前后端的交互,pathRewrite可以理解为一个重定向的功能

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值