前面几篇文章讲解 AJAX 异步的访问等等之类的，都是在同源的策略下进行访问数据。这次我们讲讲跨域。跨域访问不是自己的数据,访问其他的数据称之为跨域。只有不同源的情况下才算跨域我们先讲解同源不同源的概念和跨域的方法

同源策略

源 = 协议 + 域名 + 端口

例：http://baidu.com 跟http://baidu.com/?是同源的
例：http://baidu.com 跟http://www.baidu.com是不同源的

协议 + 域名 + 端口  相同才是同源

如果谁访问都可以得到数据,那用户的隐私无法得到保证 公司就没了。那我们怎么让不同源的情况下给它响应的?

知道同源之后如果源不一样去请求的时候是拿不到数据的,所以在我们进行访问源后端得设置只有谁跨域请求才响应,我要知道你的身份是正确才要返回数据。

一共两种方法：1. cors 2. jsonp

Cors

//简单请求
if (path === "/friends.json") {
  response.statusCode = 200;
  response.setHeader("Content-Type", "text/json;charset=utf-8");
  response.setHeader("Access-Control-Allow-Origin", "http://xiaoxiao.com:9999");
  response.write(fs.readFileSync("./public/friends.json"));
  response.end();
}

//access-control-allow-origin:*;如果为星号的话该资源可以被任意外域访问
//access-control-allow-origin:http://xiaoxiao.com:9999;只能被该协议域名端口访问;除了该外域其他都不可访问

cors 只需要在被访问者的后端设置头部信息即可,遗憾是这种方法 IE 6 7 8 9 不支持!

Jsonp

//该方法稍微复杂,虽然数据不能被访问但是.js文件是可以被访问的.我们先把数据放在js里请求js即可这是大体思路

首先分两个文件我们用 Jsonp 的方法来进行 xiaoxiao.com 请求 qq.com 里的数据跨域请求数据

xiaoxiao-com 文件 main.js

function jsonp(url){
  return new Promise((resolve,reject)=>{
      const random = 'xiaoxiaoJsonP'+Math.random()

      window[random] = data => {
        console.log(data)
      }

      const script = document.createElement('script')
      script.src = `${url}?callback=${random}`
      script.onload = () =>{
        script.remove()
      }
      script.onerror= () =>{
        console.log(1)
      }

      document.body.appendChild(script)
  })
}
jsonp("http://qq.com:8888/friends.js").then(data => {
  console.log(data);
});
//new Promise : 返回一个Promise的实例对象
//Math.random : 返回一个浮点数,伪随机数的范围[0,1)

qq.com server.js

if (path === "/friends.js") {
    if (request.headers["referer"].indexOf("http://xiaoxiao.com:9999") === 0) {
      response.statusCode = 200;
      response.setHeader("Content-Type", "text/javascript;charset=utf-8");
      const string = `window['{{xxx}}']({{data}})`;
      const data = fs.readFileSync("./public/friends.json").toString();
      const string2 = string
        .replace(`{{data}}`, data)
        .replace(`{{xxx}}`, query.callback);
      response.write(string2);
      response.end();
    } else {
      response.statusCode = 404;
      response.end();
    }
  }

//Referer:请求头包含了当前请求页面的来源页面的地址.既表示当前页面是通过来源页面里的链接进入的
//string : 是跟xiaoxiao.com main.js里的一个函数把xx替换成random.data替换成json
//String.prototype.replace():方法返回一个由替换值替换一些或所有匹配的模式后的新字符串

上述两种方法源码已经写好你直接下载在本地用 node 运行

源代码

用 git clone 下载到你的目录当中.跨域请求到数据然后 console.log