跨域

1、什么是跨域

同一域名下的文档或脚本去访问另一个域名下的资源，叫跨域

2、跨域出现的方式

1、资源跳转：a，重定向，表单
2、资源嵌入：link，script，img，frame，background，font-face
3、脚本：ajax

3、跨域限制-同源

同源策略是浏览器最基本的安全策略，协议+域名+端口，相同的才允许访问，主要限制：cookie，localStorage无法读取，DOM和JS对象无法获得，ajax请求无法发送。

4、跨域解决方案1-jsonp

jsonp的原理

利用script标签可以允许跨域，jsonp的实现需要后端辅助

jsonp解决跨域方式与其他方案有何优缺

1、jsonp的兼容性好
2、缺点是仅支持get方式的请求，并且不安全，容易受到xss攻击

原理实现

1、前端

funtion jsonp({url, params, callback}) {
  return new Promise((resolve, reject) => {
     // 创建script标签
    let script = document.creatElement('script);
    params = { ...params, callback } // wd=b&callback=show
    let arrs = []
    for (let key in params) {
      arrs.push(`${key}=${params[key]}`)
    }
    script.src = `${url}?${arrs.join('&')}`
    document.body.appendChild(script)
    // 给window绑定一个callback方法，获取完数据之后删掉script标签
    window[callback] = function (data) {
      resolve(data);
      document.body.removeChild(script);
    }
  });
}

调用

jsonp({
  url: 'http://localhost:9090/say',
  params: { wd: '你好！' },
  callback: 'show'
}).then(data => {
  console.log(data)
});

2、server端配置

app.get('/say', (req, res) => {
  let {wd, callback} = req.query;
  console.log(wd);
  res.send(`${callback}('滚')`);
});