Hello, here is the blog of Wang Xiaobai welcome your arrival
你好,这里是王小白的博客 欢迎你的到来
前言: 可以说跨域是前端避不开的话题 我们会常常与他打交道 在这里 我总结几个问题 希望你们能 指出问题 哪里有做的不足的地方需要改进 我会努力 谢咯~!
1. 如何判断是否跨域呢 :
假设我们在 A 地址向 B地址 发起请求 此时 A 和 B 的请求地址 : 协议 域名 端口号 不全相同的情况下 则说明跨域。
2. 在跨域的情况不报错和报错的两种情况 :
(1)不报错的情况: 请求跨域了,并不一定会报错。普通的图片请求,css文件请求是不会报错的
(2) 报错的情况: 浏览器同源策略 && 请求是ajax类型
3. 解决方案 :
1 前端不要用JSONP方式请求
2 后端写代码(CORS)在响应中添加必要的响应头,让响应回来之后浏览器不报错
3 代理转发 : 通过配置vue-cli请求代理 解决 开发环境下的跨域问题 :
(3.1)在vue.config.js中配置devServer
(3.2)确保基地址指向本地服务
vue-cli解决跨域配置说明 代码实现 :
在vue.config.js
配置文件中,有一项是devServer,它就是我们下边要操作的主角。
module.exports = {
devServer: {
// 代理配置
proxy: {
// 如果请求地址以/api打头,就出触发代理机制
'/api': {
target: ' 我们要代理的真实接口地址'
}
}
}
}
}
确保基地址指向本地服务 :
在 .env.development 中修改
VUE_APP_BASE_API = '/api' // 调用接口的url 地址 就可以省略 /api了