紧接着上一篇的同源策略, 本篇文章主要记录一下实现跨域的几种实现方式

记录

常用跨域方式:

Jsonp

诸如script、img、iframe等标签没有跨域限制. 通过script的src指向一个后台地址且携带一个回调函数.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function jsonp(
  url: string,
  jsonpCbName: string,
  success?: (...args: any[]) => void,
): void {
  const settings = {
    src: url,
    async: true,
    type: 'text/javascript',
  };
  const script = document.createElement('script');

  for(const [key, value] in settings.entries()) {
    Reflect.set(script, key, value);
  }

  window[jsonpCbName] = (data: any) => {
    success && success(data);
  };

  document.body.appendChild(script);
}

Nginx

Nginx反向代理实现跨域

CORS

后端设置Access-Control-Allow-Origin, 可以过滤筛选域名.

WebSocket

socket.io

参考