跨域原理解析

由浏览器引起的,因为浏览器发出去的请求和当前网站所在的地址、协议、域名、端口号、有任何不一样都认为是跨域,阻止你发送请求出去“同源策略”

1、jsonp

躲避浏览器的同源问题,原理就是动态的在浏览器追加script标签,给script标签加上src的地址就是接口的地址,经过特殊的处理,会返回一段js函数,这个js函数会在浏览器执行,由于是个script标签所以浏览器认为它是get请求,不去拦截,该方式不能使用POST,前后端都需要改代码。

2、cors (服务端 跨域资源共享)

通过服务器实现一些验证,实现一个options请求,前端通过一些预处理、预检测,身份合理,请求方法,参数的设置都没有超出服务端对它的要求,经过了预检测,服务器就会认为说这个请求是安全可靠的,就会把数据返回给它,浏览器发现是这个options请求的话也会同意把数据返回给它,如果使用cors方案的话,浏览器会发送两次请求,先发送options请求,请求通过检测之后才会发送真正的请求,如:公共的API

3、proxy 代理服务器

nginx反向代理服务器
打包发布时,浏览器会有一个api地址,这时nginx服务器配上一个代理proxy,监听请求的api前缀开头的,只要nginx发现有这么一个请求,需要代理,那nginx就帮我们发送真正的请求到接口服务器,接口服务器会把数据返回给nginx,然后nginx就会把结果返回到浏览器,也就不存在跨域了,因为无论我们访问浏览器还是api服务器都是nginx代理服务器,服务器请求服务器不会跨域。

跨域原理解析_第1张图片

你可能感兴趣的:(前端,javascript)