什么是跨域

浏览器从一个域名去请求另一个域名,域名端口,协议不同都是跨域

JSONP 跨域

• jsonp 跨域就是用户传入一个回调函数,参数传递给服务端,服务端会返回数据时会将这个 callback 参数作为函数名来包裹住 JSON 数据

• jsonp 就是动态的在 html 里增加一个 script 标签,因为 script 标签的 src 是没有同源策略的

例如:客户端

<script>
    function jsonp({ url, query, cb }) {

      let q = { query, cb };
      let qArr = [];
      for (let key in qArr) {
          qArr.push(`${key}=${qArr[key]}`)
      }
      let cScript = document.createElement('script');
      cScript.src = `${url}?${qArr.join('&')}`
      document.body.appendChild(cScript)
    }

  jsonp({
      url: 'http//:www.zhangnuli.xyz/jsonp',
      query: {
          a: 1,
          b: 2
      },
      cb: 'callback1'
    })
</script>

服务端(基于 node 框架 koa)

router.get('/jsonp',asynx ctx=>{
  let {cb}=ctx.request.query;
  ctx.body=`cb({data})`
})

这样我们就简单的实现了一个 JSONP 的实现,不过 JSONP 只能发送 GET 请求,并且安全性也不好

CORS 跨域

跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的 Web 应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

• CORS 跨域是由服务端完成的(示例基于 koa)

• 例如:

app.use(async (ctx, next) => {
  //设置允许哪个域名可以请求 (*代表所有)
  ctx.set('Access-Control-Allow-Origin', 'http://localhost:3000');

  //设置可以允许使用哪些方法
  ctx.set('Access-Control-Allow-Methods', 'PUT,DELETE,POST,GET');

  //是否允许后续请求携带认证信息（cookies）,该值只能是true,否则不返回
  ctx.set('Access-Control-Allow-Credentials':true);

  //预检结果缓存时间,也就是上面说到的缓存啦
  ctx.set('Access-Control-Max-Age': 1800)

  //进行下一步操作
  await next();
});

通俗来说,CORS 跨域就是由服务端设置不同的请求头信息

nginx 跨域

在服务器端的 nginx.conf 中配置增加配置

  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Headers X-Requested-With;
  add_header Access-Control-Allow-Methods GET,POST,OPTIONS

  //例如
  location /api {
   root #你文件的路径

   add_header Access-Control-Allow-Origin *;
   add_header Access-Control-Allow-Headers X-Requested-With;
   add_header Access-Control-Allow-Methods GET,POST,OPTIONS

 }

websocket

不存在跨域,我们一般会说会使用 socket.io 这个库

欢迎关注公众号