什么是跨域?
跨域是由浏览器的同源策略造成的。同源策略:指域名、协议、端口相同;如果违反了同源策略就会造成跨域。
怎么解决跨域?
这里我们列出三种解决方案:
cors
cors:一般都是后端搞定,需要在后端服务器引入cors进行相应设置。
jsonp
jsonp:我有了解过一些,利用的是script标签中的src和href属性是不受同源策略限制的,可以请求第三方服务器数据内容。
实现思路
- 去创建一个 script 标签
- script 的 src 属性设置接口地址
- 接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。
- 通过定义函数名去接收后台返回数据
proxy
proxy:通过代理服务器配置来实现,例如Vue中需要在vue.config.js中配置proxy文件,这个方法也是我常用的来解决跨域问题的方法。
下面附上配置文件代码:
module.exports = {
devServer: {
// 代理
proxy: {
//此处以斗鱼的接口为例
// https://m.douyu.com/api/room/list?type=yz
// 配合proxy 请求地址需要进行修改
// /douyu/api/room/list?type=yz 代理修改地址
// https://m.douyu.com/api/room/list?type=yz
// 代理段
"/douyu": {
// 代理到地址
target: "https://m.douyu.com",
// 域名变化的 不一致的 大部分情况都是不一样的
changeOrigin: true,
// 根据协议配置secure https要配置为true
secure: true,
// 路径重写
pathRewrite: {
// ^ 正则 以xx开头
"^/douyu": ""
}
}
}
}
}