vue-cli解决跨域问题

目标

掌握跨域的原因;复习常用的解决方案;

浏览器跨域

如何判断一个浏览器的请求是否跨域?

在A地址(发起请求的页面地址)向B地址(要请求的目标页面地址)发起请求时,

如果A地址和B地址在: 协议 域名 端口  不全相同,则说明请求是跨域的;

跨域请求在浏览器中是非常常见的现象!

跨域请报错的原因

请求是跨域的,并不一定会报错。普通的图片请求,css文件请求是不会报错的

跨域请求出现错误的条件: 浏览器同源策略  &&  请求类型是ajax类型

解决方案

  • 前端用JSONP方式去发请求(jsonp不是ajax请求)
  • 后端写代码(CORS)在响应中添加必要的响应头,让响应回来之后浏览器不报错
  • 代理转发

 

小结

浏览器发起跨域请求是很常见的;

浏览器的跨域请求报错的原因是: 浏览器同源策略 && 请求是ajax类型  && 请求确实跨域了

vue-cli中集成的跨域解决方案

 

vue-cli解决跨域配置说明

vue.config.js配置文件中,有一项是devServer,它就是我们下边要操作的主角

module.exports = {
  devServer: {
    // ... 省略
    // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        // http://localhost:9588/api/login -> http://线上的地址/api/login
        '/api': {
          target: 'http://线上的地址' // 我们要代理的真实接口地址
        }
      }
    }
  }
}

去掉axios基地址

({
  timeout: 5000
	// baseURL: ''
})

重启项目,验证结果

  1. 修改了配置文件,一定要重启前端项目
  2. 再次测试登陆接口,我们发现:跨域问题已经解决了

小结

  1. vue-cli集成了跨域代理功能------ 只能用在开发阶段
  2. vue.config.js文件中,在devServe下按指定格式配置了proxy,再重启项目即可。

特别强调:

axios的基地址baseUrl必须是相对地址,而不能是绝对地址

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员大臣

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值