什么是跨域?如何解决跨域?
跨域,是因为浏览器中存在同源策略。同源策略是指:当请求的协议、域名、和端口三者有任何一个不同时,浏览器会自动阻止请求,产生了跨域。目的是防止加载恶意资源。
解决方案:
总:知道六种,常用两种。
分:1.CORS(跨域资源共享):直接让后台开放跨域,前端不需要任何操作。(常用)
2. 服务器反向代理:(常用)
- 原理:
- 只有浏览器与服务器通信时,同源策略,才会发生。
- 服务器与服务器通信时,不会有同源策略限制,因此不会产生跨域。
- 浏览器、后台服务器之间,再设置一个代理服务器,代理服务器开放跨域。
- 实施:
- 开发环境:devServer
- 生成环境:Nginx
- 示意图:
- JSONP:(不常用)
- 原理:有些标签 script、img、link、iframe ... 这些标签不存在跨域请求的限制,就是利用这个特点解决跨域问题。
- 优点:简单适用,兼容性好(可以兼容低版本IE).
- 缺点:只支持 get 请求,不支持 post 请求,导致数据不安全
- WebSocket:(不常用)
- 原理:WebSocket是一种全双工通信协议,它能够在客户端和服务器之间建立一个持久性的连接,在这个连接上双方可以随时发送或接收数据。WebSocket协议不受同源策略的限制,因此可以在跨域的情况下进行通信。
- postMessage:(不常用)
- 原理:HTML5 中提供的 postMessage API,可以在不同的窗口之间传递数据,即使这些窗口来自不同的源,也可以实现跨域通信。
- Hash:(不常用)
- 原理:通过改变URL中的hash值来进行跨域通信。