最常见的六种跨域解决方案

126 阅读2分钟

目录:

  • 前言:什么是跨域?
  • JSONP
  • CORS
  • 搭建Node代理服务器
  • Nginx反向代理
  • postMessage
  • Websocket
  • 总结

前言:什么是跨域?

跨域就是当在页面上发送ajax请求时,由于浏览器同源策略的限制,要求当前页面和服务端必须同源,也就是协议、域名和端口号必须一致

84c33633aec74a89a4c4bf073309b14d.png 如果协议、域名和端口号中有其中一个不一致,则浏览器视为跨域,进行拦截。

d8a98c72ef50429e8944c74e887c6e83.png

1、JSONP方式解决跨域:

jsonp的原理就是利用了script标签不受浏览器同源策略的限制,然后和后端一起配合来解决跨域问题的。

2、CORS方式解决跨域:

CORS方式解决跨域问题比较常用,只需要后端配置响应头Access-Control-Allow-Origin,前端无需配置,实现简单

3、搭建Node代理服务器解决跨域

4、Nginx反向代理解决跨域

nginx通过反向代理解决跨域也是利用了服务器请求服务器不受浏览器同源策略的限制实现的。 nginx.conf配置文件中的配置: image.png 前端代码如下:

image.png nginx反向代理方式和node中间件代理方式的原理其实差不多,都是利用了服务器和服务器之间通信不受浏览器的同源策略的限制,但是node代理方式相对复杂一些,还要自己搭建一个node服务器,而用nginx只需要修改nginx.conf配置文件即可解决跨域问题。

5、postMessage方式解决跨域:

window.postMessage()  方法可以安全地实现跨源通信,此方法一种受控机制来规避此限制,只要正确的使用,这种方法就很安全。

主要的用途是实现多窗口,多文档之间通信:

  1. 页面和其打开的新窗口的数据传递
  2. 多窗口之间消息传递
  3. 页面与嵌套的 iframe 消息传递

6、Websocket方式解决跨域:

简单来说:客户端和服务器之间存在持久连接,双方可以随时开始发送数据。

总结:

  • jsonp的原理是利用了script标签不受浏览器同源策略的限制,img和link标签也是不受浏览器同源策略限制的。
  • 跨域是浏览器限制,服务端和服务端之间通信是不受浏览器同源策略限制的。
  • 所有跨域的解决方案都是需要服务端配合的。
  • 最常用的跨域解决方案是CORS、Node代理服务器和Nginx反向代理方式。
  • postMessage更多的是用在多个文档,窗口之间发送数据。