跨域（非同源策略请求）

  • 同源策略请求 ajax / fetch
  • 跨域传输
    如果部署到同一个web服务器上，那么就属于同源策略
    跨域问题出现原因就是服务端和客户端项目分离，客户端向非同源的服务器端请求数据会受到浏览器同源策略的限制，所以就出现了跨域问题。

假跨域

一种原始的(跨域)写项目的方案

  • xampp 修改本地的host文件 
127.0.0.1:1234 http://api.qq.com/

http://127.0.0.1:1234/index.html
http://api.qq.com/getData
这种方式只是解决了在开发过程中的跨域问题，到了部署上线还是要在同一台服务器上部署

保证服务器负载均衡，高负荷运作，将服务器进行拆分
web服务器：静态资源
data服务器：业务逻辑和数据分析（包含对数据库的管理）
图片（音视频）服务器

真实情况下跨域情况比同源情况更多

================================================

1. JSONP

  • script
  • img
  • link
  • iframe
  • ...
    => 不存在跨域请求限制
    问题：JSONP只能处理GET请求
    威胁：URL劫持，导致数据不安全、服务器返回木马程序的js后浏览器执行了就发生了威胁
    图片说明
    图片说明

代码：https://github.com/1782575033/cross-domain/tree/master/JSONP

================================================

2. CORS跨域资源共享

CORS跨域资源共享也需要服务器端的支持
一般我们请求非同源的请求的时候，会报错如下
图片说明

局限性：源只能写一种，只能是*或者指定地址

  • （*） ：就不能携带cookie了（浏览器为了安全）
  • 具体地址 ：只能写一个源了，不能支持多源访问

代码：https://github.com/1782575033/cross-domain/tree/master/CORS

================================================

3. http proxy

配合webpack和webpack-dev-server来使用

代码：https://github.com/1782575033/cross-domain/tree/master/proxy

================================================

4.ngnix方向***

不需要前端干

================================================

5.postMessage

MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
代码：https://github.com/1782575033/cross-domain/tree/master/MESSAGE

6.socket.io

利用实时通信协议WebSocket协议跨域

document.domain + iframe

只能实现同一个主域，不同子域之间的操作

window.name + iframe