聊聊跨域

同源策略

1. 源：协议+域名+端口号 (可通过window.origin或location.origin获取当前的源)
2. 同源：指协议域名端口号完全一致，即为同源
3. 同源策略：不同源的网址不准访问彼此的数据。如果js运行再A里，那么只能获取源A的数据，不能获取源B的数据，即不允许跨域。
4. 意义：这是浏览器为了保护用户隐私而严格规定的

跨域的实现方案

假设A的网址为http://A.com:3000,B的网址为http://B.com:4000

一、CORS

1. 如果想让网址B访问网址A,需要在A的响应头里添加网址上B,这样的话网址B才可以访问网址A
   具体实现

网址A

   // server.js
   if (path === "/friends.json") {
    response.statusCode = 200;
    response.setHeader("Content-Type", "text/json;charset=utf-8");
    // 允许网址B访问网址A的friends.json文件
    response.setHeader("Access-Control-Allow-Origin", 网址B);
    response.write(fs.readFileSync("friends.json的位置"));
    response.end();
  }

2. 如果想让A被任意网址所访问
   具体实现

  // server.js
  if (path === "/friends.json") {
    response.statusCode = 200;
    response.setHeader("Content-Type", "text/json;charset=utf-8");
    // 允许 其他网站跨域访问A的friends.json 的代码（在不做任何限制的情况下是任意网址都可访问到friends.json里的数据）
    let otherUrl = request.headers["referer"].slice(0, -1);
    response.setHeader("Access-Control-Allow-Origin", otherUrl);

    response.write(fs.readFileSync("friends.json的位置"));
    response.end();
  }

网址B

  // 获取friends.json里面的数据
  const request = new XMLHttpRequest();
  request.open("GET", "http://A.com:3000/friends.json");
  request.onreadystatechange = () => {
  if (request.readyState === 4 && request.status === 200) {
    console.log(request.response);
  }
  };
  request.send()

3.缺点：不兼容IE6,7,8,9

二、JSONP

1. 如果浏览器是IE6,7,8,9，它们没有CORS，无法使用CORS进行跨域。所以，为了兼容IE,JSONP出现了
2. 实现步骤：将网址A的friends.json的数据写到friends.js中，网址B用script标签引用friends.js,B就能获取到A的friends.js，数据也就获取到了，实现了跨域
   具体实现

网址A

   // friends.js
   window.friends = {{data}}

  // server.js
  if (path === "/friends.js") {
    response.statusCode = 200;
    response.setHeader("Content-Type", "text/javascript;charset=utf-8");
    // 将friends.json数据放到friends.js里
    const string = fs.readFileSync("friends.js的位置").toString();
    const data = fs.readFileSync("friends.json的位置").toString();
    // 使用data替换掉friends.js里的{{data}}
    const newString = string.replace('{{data}}',data)
    response.write(newString)
    response.end();
  } 

网址B

   // 获取friends.js的数据
   const script = document.createElement('script')
   script.src="http://A.com:3000/friends.js"
   script.onload =()=>{
      console.log(window.friends);
   }
   document.body.appendChild(script)