1.跨域问题产生
1.1 跨域现象
在A地址想B地址发送请求时,如果A地址跟B地址协议 ,域名,端口号不全相同时,则说明请求是跨域的
1.2原因
跨域问题的产生那我们就不得不说一下同源策略 , 同源策略是客户端的安全度量标准,其目的是防止某个文档或者脚本从多个不同源装载,所谓的同源指的是:协议 域名 端口号相同,同源策略是一种安全协议,指一段脚本只能读取来自同一来源的窗口和文档的属性
所以跨域产生由以上两种原因 1 同源策略影响 2 请求为ajax请求
2.解决方法
2.1 JSONP
原理:动态的创建一个script标签,利用script标签的src属性不受同源策略限制,因为所有的src属性和href属性都不受同源策略限制,可以请求第三方服务器数据内容
步骤
1 创建一个script标签
2 script的src属性设置接口地址
3 接口参数,必须要带一个自定义函数名要不然后台无法返回数据
4 通过第一函数名去接收后台返回数据
2.2 反向代理
通过配置vue-cli请求代理解决开发环境下的跨域问题
这里需要我们先注释掉基地址 2 在vue.config.js中进行如下配置
module.exports = {
devServer: {
// ... 省略
// 代理配置
proxy: {
// 如果请求地址以/api打头,就出触发代理机制
// http://localhost:9588/api/login -> http://线上的地址/api/login
'/api': {
target: 'http://线上的地址' // 我们要代理的真实接口地址
}
}
}
}
}
2.3联系后端
让后端统一处理(简单高效 ,强烈推荐)