跨域

面试必问！！！

同源

用window.origin可以得到源，就是
协议+域名+端口号
若两个url三个全部相同被叫做同源

同源策略

浏览器专门设计的功能限制
浏览器规定：
若js在源A中运行只可获得A中的数据，不能获得B中的数据，也就是不能跨域

这是为了保护客户隐私

1. qq.com和钓鱼网站发的只有请求头里面refer不同，所以无法区分发送者
2. 检查refer是可行的，但是还是要主动预防有人偷数据的行为，
   安全链条取决于最薄弱的那一点，万一安全组有新手咋办？
   eg
   若是qq.com引用了cdn.com/js，这时候可以成功发送请求却没办法得到回应。
   即使是同一端口or域名orip，但如果不同源也会限制，因为出现过共用ip or 端口or域名的情况。

为何可以跨域用css,js,图片？

因为同源限制只针对数据访问，上述引用是不知道其内容，仅仅是引用，是不知道具体字符的。

解决方法

CORS

完美方案
用之前会先提前声明可共享，会写在响应头里面
eg

if (path === "/friends.json") {
    response.statusCode = 200;
    response.setHeader("Content-Type", "text/json;charset=utf-8");
    response.setHeader("Access-Control-Allow-Origin", "http://frank.com:9999");//这里是cors协议
    response.write(fs.readFileSync("./public/friends.json"));
    response.end();
  }

只要在响应头里面写一句允许xxx进去就可了

JSONP

这是与JSON毫无关系，只是一开始喜欢把JSON数据塞进JS，现在可以塞其他数据，eg：XML
可以实现无CORS的跨域，不可读取数据，却可以把数据塞进JS，从而引用数据
eg

function jsonp(url) {
  return new Promise((resolve, reject) => {
    const random = "frankJSONPCallbackName" + Math.random();
    window[random] = data => {
      resolve(data);
    };
    const script = document.createElement("script");
    script.src = `${url}?callback=${random}`;//这里本来是function，但大家都叫做callback了
    script.onload = () => {
      script.remove();
    };
    script.onerror = () => {
      reject();
    };
    document.body.appendChild(script);
  });
}

jsonp("http://qq.com:8888/friends.js").then(data => {
  console.log(data);
});

面试必考！！！

优点

• 可跨域
• 兼容IE
  缺点

1. script标签无法做到像AJAX那样精准
2. 无法得到状态码
3. 不支持POST，只支持GET

其他方法

1. 动态网页
   （如果请求了数据库就是动态，否则是静态）