什么是跨域
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。
解决方法
- jsonp
原生的js中的script,link,img,iframe等资源访问访问标签自带跨域功能,也就是使用这些标签请求不同源的资源时,浏览器会默认的放行
jsonp就是利用script标签跨域功能,将跨域资源路径卸载script的src中进行跨域请求
scriptDom.src="http://localhost:5000/bar.data=a"请求路径后面定义了一个回调函数,随请求一并的传递给服务器,服务器就会获取到这个参数,然后返回一个调用字符串浏览器拿到字符串之后,会将字符串当作js代码进行执行,这就完成了跨域。
jsonp需要客户端和服务端的写作完成,客户端要定义全局的回调函数,并在请求参数中添加对应的回调函数。
服务器则需要获取到回调的函数,然后将服务数据放在回调函数中,作为字符串进行返回。
注意:浏览器有自动把服务器返回的字符串进行解析执行的能力
2.CORS方式解决跨域:
cors是跨域资源共享,是一种基于 HTTP 头的机制,该机制通过允许服务器标示除了它自己以外的其它 origin(域,协议和端口),使得浏览器允许这些 origin 访问加载自己的资源。服务端设置了Access-Control-Allow-Origin就开启了CORS,所以这种方式只要后端实现了CORS,就解决跨域问题,前端不需要配置。
CORS方式解决跨域问题比较常用,只需要后端配置响应头Access-Control-Allow-Origin
3.搭建Node代理服务器解决跨域:
因为同源策略是浏览器限制的,所以服务端请求服务器是不受浏览器同源策略的限制的,因此我们可以搭建一个自己的node服务器来代理访问服务器。
大概的流程就是:我们在客户端请求自己的node代理服务器,然后在node代理服务器中转发客户端的请求访问服务器,服务器处理请求后给代理服务器响应数据,然后在代理服务器中把服务器响应的数据再返回给客户端。客户端和自己搭建的代理服务器之间也存在跨域问题,所以需要在代理服务器中设置CORS。
nginx反向代理接口跨域
跨域原理: 同源策略是浏览器的安全策略,不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议,不会执行JS脚本,不需要同源策略,也就不存在跨越问题。
实现思路:通过nginx配置一个代理服务器(域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域登录。
5.Nodejs中间件代理跨域
node中间件实现跨域代理,原理大致与nginx相同,都是通过启一个代理服务器,实现数据的转发,也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名,实现当前域的cookie写入,方便接口登录认证。