跨域问题

127 阅读1分钟

什么是跨域?

跨域是由浏览器的同源策略造成的。同源策略:指域名、协议、端口相同;如果违反了同源策略就会造成跨域。

怎么解决跨域?

这里我们列出三种解决方案:

cors

cors:一般都是后端搞定,需要在后端服务器引入cors进行相应设置。

jsonp

jsonp:我有了解过一些,利用的是script标签中的src和href属性是不受同源策略限制的,可以请求第三方服务器数据内容。

实现思路

  1. 去创建一个 script 标签
  2. script 的 src 属性设置接口地址
  3. 接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。
  4. 通过定义函数名去接收后台返回数据

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": ""
				}
			}
		}
	}
}