前端开发中,跨域是我们经常遇到的问题,同时面试中也会经常问到这类问题,这里就来总结下

参考文档:

阮一峰的 跨域资源共享 CORS 详解

https://segmentfault.com/a/1190000011145364

什么是跨域

跨域是浏览器为执行同源策略所造成的,是浏览器对 JavaScript 脚本实施的安全限制。

同源策略限制了一下行为:

  • Cookie、LocalStorage 和 IndexDB 无法读取
  • DOM 和 JS 对象无法获取
  • Ajax 请求发送不出去

解决跨域

jsonp 跨域

jsonp 跨域其实也是 JavaScript 设计模式中的一种代理模式。在 html 页面中通过相应的标签从不同域名下加载静态资源文件是被浏览器允许的,所以我们可以通过这个“漏洞”来进行跨域。一般,我们可以动态的创建 script 标签,再去请求一个带参网址来实现跨域通信

原生 js 实现

let script = document.createElement('script');

script.src = 'http://www.baidu.com/login?username=Liusxin&callback=callback';

document.body.appendChild(script);

function callback(res) {
  console.log(res);
}

jquery 实现

$.ajax({
  url: 'http://www.baidu.com/login',
  type: 'GET',
  dataType: 'jsonp', //请求方式为jsonp
  jsonpCallback: 'callback',
  data: {
    username: 'Liusixin'
  }
});

虽然这种方式非常好用,但是一个最大的缺陷是,只能够实现 get 请求

document.domain + iframe 跨域

这种跨域的方式最主要的是要求主域名相同。什么是主域名相同呢? a.liusixin.cn b.liusixin.cn a.b.liusixin.cn 这三个主域名都是 liusixin.cn,而主域名不同的就不能用此方法。

假设目前 a.liusixin.cnb.liusixin.cn 分别对应指向不同 ip 的服务器。

a.liusixin.cn 下有一个 test.html 文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>html</title>
  <script type="text/javascript" src="jquery-1.12.1.js"></script>
</head>

<body>
  <div>a页面</div>
  <iframe style="display : none" name="iframe1" id="iframe" src="http://b.liusixin.cn/1.html" frameborder="0"></iframe>
  <script type="text/javascript">
    $(function() {
      try {
        document.domain = "liusixin.cn"
      } catch (e) {}
      $("#iframe").load(function() {
        var jq = document.getElementById('iframe').contentWindow.$
        jq.get("http://liusixin.cn/test.json", function(data) {
          console.log(data);
        });
      })
    })
  </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>b页面</title>
  <script type="text/javascript" src="jquery-1.12.1.js"></script>
  <script type="text/javascript">
    $(function() {
      try {
        document.domain = "liusixin.com"
      } catch (e) {}
    })
  </script>
</head>

<body>
  <div id="div1">B页面</div>
</body>

</html>

利用 iframe 加载 其他域下的文件(liusixin.cn/1.html), 同时 document.domain 设置成 liusixin.cn ,当 iframe 加载完毕后就可以获取 liusixin.cn 域下的全局对象, 此时尝试着去请求 liusixin.cn 域名下的 test.json,就会发现数据成功拿到。

window.name + iframe 跨域

window.name 属性可设置或者返回存放窗口名称的一个字符串。他的神奇之处在于 name 值在不同页面或者不同域下加载后依旧存在,没有修改就不会发生变化,并且可以存储很大的数据 name(2MB)

假设 index 页面请求远端服务器上的数据,我们在该页面下创建 iframe 标签,该 iframe 的 src 指向服务器文件的地址(iframe 标签 src 可以跨域),服务器文件里设置好window.name的值,然后再在index.html里面读取改 iframe 中的window.name的值。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script type="text/javascript" src="jquery-1.12.1.js"></script>
</head>

<body>
  <script type="text/javascript">
    iframe = document.createElement('iframe');
    iframe.src = 'http://localhost:8080/data.php';
    document.body.appendChild(iframe);
    iframe.onload = function() {
      console.log(iframe.contentWindow.name)
    };
  </script>
</body>

</html>

当然,这样还是不够的。

因为规定如果 index.html 页面和和该页面里的 iframe 框架的 src 如果不同源,则也无法操作框架里的任何东西,所以就取不到 iframe 框架的 name 值了。既然要同源,那就换个 src 去指,前面说了无论怎样加载window.name值都不会变化,于是我们在index.html相同目录下,新建了个proxy.html的空页面,修改代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>proxy</title>
  <script type="text/javascript" src="jquery-1.12.1.js"></script>
</head>

<body>
  <script type="text/javascript">
    iframe = document.createElement('iframe');
    iframe.src = 'http://localhost:8080/data.php';
    document.body.appendChild(iframe);
    iframe.onload = function() {
      iframe.src = 'http://localhost:81/cross-domain/proxy.html';
      console.log(iframe.contentWindow.name)
    };
  </script>
</body>

</html>

理想似乎很美好,在 iframe 载入过程中,迅速重置iframe.src的指向,使之与index.html同源,那么 index 页面就能去获取它的 name 值了!但是现实是残酷的,iframe 在现实中的表现是一直不停地刷新, 也很好理解,每次触发 onload 时间后,重置 src,相当于重新载入页面,又触发 onload 事件,于是就不停地刷新了(但是需要的数据还是能输出的)。修改后代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>proxy</title>
  <script type="text/javascript" src="jquery-1.12.1.js"></script>
</head>

<body>
  <script type="text/javascript">
    iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    var state = 0;

    iframe.onload = function() {
      if (state === 1) {
        var data = JSON.parse(iframe.contentWindow.name);
        console.log(data);
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
      } else if (state === 0) {
        state = 1;
        iframe.contentWindow.location = 'http://localhost:81/cross-domain/proxy.html';
      }
    };

    iframe.src = 'http://localhost:8080/data.php';
    document.body.appendChild(iframe);
  </script>
</body>

</html>

所以如上,我们就拿到了服务器返回的数据,但是有几个条件是必不可少的:

  • iframe 标签的跨域能力
  • window.names 属性值在文档刷新后依然存在的能力

location.hash + iframe 跨域

此跨域方法和上面介绍的比较类似,一样是动态插入一个 iframe 然后设置其 src 为服务端地址,而服务端同样输出一端 js 代码,也同时通过与子窗口之间的通信来完成数据的传输。

关于锚点相信大家都已经知道了,其实就是设置锚点,让文档指定的相应的位置。锚点的设置用 a 标签,然后 href 指向要跳转到的 id,当然,前提是你得有个滚动条。

location.hash其实就是 url 的锚点。比如http://www.liusixin.cn#test 的网址打开后,在控制台输入location.hash就会返回 #test 的字段。

基础知识补充完毕,下面我们来说下如何实现跨域

如果 index 页面要获取远端服务器的数据,动态的插入一个 iframe,将 iframe 的 src 执行服务器的地址,这时候的 top window 和包裹这个 iframe 的子窗口是不能通信的,因为同源策略,所以改变子窗口的路径就可以了,将数据当做改变后的路径的 hash 值加载路径上,然后就可以通信了。将数据加在 index 页面地址的 hash 上, index 页面监听 hash 的变化,h5 的hashchange方法

<body>
  <script type="text/javascript">
    function getData(url, fn) {
      var iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      iframe.src = url;

      iframe.onload = function() {
        fn(iframe.contentWindow.location.hash.substring(1));
        window.location.hash = '';
        document.body.removeChild(iframe);
      };

      document.body.appendChild(iframe);
    }

    // get data from server
    var url = 'http://localhost:8080/data.php';
    getData(url, function(data) {
      var jsondata = JSON.parse(data);
      console.log(jsondata.name + ' ' + jsondata.age);
    });
  </script>
</body>

location.hashwindow.name 都是差不多的,都是利用全局对象属性的方法,然后这两种方法和 jsonp 也是一样的,就是只能够实现get请求

postMessage 跨域

这是由 HTML5 提出来的一个新的的 API,IE8+,chrome,ff 都已经支持实现了这个功能。这个功能也是非常的简单,其中包括接受信息的 Message 时间,和发送信息的postMessage方法。

发送信息的 postMessage 方法是向外界窗口发送信息

otherWindow.postMessage(message, targetOrigin);

otherWindow指的是目标窗口,也就是要给哪一个 window 发送消息,是window.frames属性的成员或者是window.open方法创建的窗口。 Message是要发送的消息,类型为StringObject(IE8、9 不支持 Obj),targetOrigin是限定消息接受范围,不限制就用星号 *

接受信息的message事件

var onmessage = function(event) {
  var data = event.data;
  var origin = event.origin;
};

if (typeof window.addEventListener != 'undefined') {
  window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
  window.attachEvent('onmessage', onmessage);
}

举个例子

a.html(http://www.liusixin.cn/a.html)

<body>
  <iframe id="iframe" src="http://www.lsx.cn/b.html" style="display:none;"></iframe>
  <script>
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
      var data = {
        name: 'lsx'
      };
      // 向lsx传送跨域数据
      iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.lsx.cn');
    };

    // 接受domain2返回数据
    window.addEventListener('message', function(e) {
      alert('data from lsx ---> ' + e.data);
    }, false);
  </script>
</body>

b.html(http://www.lsx.cn/b.html)

<body>
  <script>
    // 接收domain1的数据
    window.addEventListener('message', function(e) {
      alert('data from liusixin ---> ' + e.data);

      var data = JSON.parse(e.data);
      if (data) {
        data.number = 16;

        // 处理后再发回liusixin
        window.parent.postMessage(JSON.stringify(data), 'http://www.liusixin.cn');
      }
    }, false);
  </script>
</body>

跨域资源共享 CORS

是目前主流的跨域解决方案

CORS 是一个 W3C 标准,全称是”跨域资源共享”(Cross-origin resource sharing)。 它允许浏览器向跨源服务器,发出 XMLHttpRequest 请求,从而克服了 AJAX 只能同源使用的限制。

CORS 需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE 浏览器不能低于 IE10。IE8+:IE8/9 需要使用 XDomainRequest 对象来支持 CORS。

整个 CORS 通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS 通信与同源的 AJAX 通信没有差别,代码完全一样。浏览器一旦发现 AJAX 请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。 因此,实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口,就可以跨源通信。

两种请求

分为两种请求,一种是简单请求,另一种是非简单请求。只要满足下面条件就是简单请求

  • 请求方式为 HEAD、POST 或者 GET
  • http 头信息不超出以下字段:AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type(限于三个值:application/x-www-form-urlencodedmultipart/form-datatext/plain)

浏览器对这两种请求方式的处理方式是不同的。

简单请求

对于简单请求,浏览器直接发出 CORS 请求。具体来说,就是在头信息之中,增加一个 Origin 字段。 下面是一个例子,浏览器发现这次跨源 AJAX 请求是简单请求,就自动在头信息之中,添加一个 Origin 字段。

GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0
...

Origin 字段用来说明,本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值,决定是否同意这次请求。

如果 Origin 指定的源,不在许可范围内,服务器会返回一个正常的 HTTP 回应。 浏览器发现,这个回应的头信息没有包含Access-Control-Allow-Origin字段(详见下文),就知道出错了,从而抛出一个错误,被XMLHttpRequestonerror回调函数捕获。

注意,这种错误无法通过状态码识别,因为 HTTP 回应的状态码有可能是 200。

如果 Origin 指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段。

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

上面的头信息之中,有三个与 CORS 请求相关的字段,都以 Access-Control- 开头

  • Access-Control-Allow-Origin :该字段是必须的。它的值要么是请求时 Origin 字段的值,要么是一个*,表示接受任意域名的请求
  • Access-Control-Allow-Credentials: 该字段可选。它的值是一个布尔值,表示是否允许发送 Cookie。默认情况下,Cookie 不包括在 CORS 请求之中。设为 true,即表示服务器明确许可,Cookie 可以包含在请求中,一起发给服务器。这个值也只能设为 true,如果服务器不要浏览器发送 Cookie,删除该字段即可。
  • Access-Control-Expose-Headers:该字段可选。CORS 请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到 6 个基本字段:Cache-ControlContent-LanguageContent-TypeExpiresLast-ModifiedPragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers 里面指定。

withCredentials属性

上面说到,CORS 请求默认不发送 Cookie 和 HTTP 认证信息。如果要把 Cookie 发到服务器,一方面要服务器同意,指定Access-Control-Allow-Credentials字段。另一方面,开发者必须在 AJAX 请求中打开withCredentials属性。

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容

// 前端设置是否带cookie
xhr.withCredentials = true;

xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    alert(xhr.responseText);
  }
};

// jquery
$.ajax({
  ...
  xhrFields: {
    withCredentials: true // 前端设置是否带cookie
  },
  crossDomain: true, // 会让请求头中包含跨域的额外信息,但不会含cookie
  ...
});

否则,即使服务器同意发送 Cookie,浏览器也不会发送。或者,服务器要求设置 Cookie,浏览器也不会处理。 但是,如果省略withCredentials设置,有的浏览器还是会一起发送 Cookie。这时,可以显式关闭withCredentials

需要注意的是,如果要发送 Cookie,Access-Control-Allow-Origin就不能设为星号,必须指定明确的、与请求网页一致的域名。同时,Cookie 依然遵循同源政策,只有用服务器域名设置的 Cookie 才会上传,其他域名的 Cookie 并不会上传,且(跨源)原网页代码中的document.cookie也无法读取服务器域名下的 Cookie。

非简单请求

非简单请求是那种对服务器有特殊要求的请求,比如请求方法是 PUT 或 DELETE,或者Content-Type字段的类型是application/json

非简单请求的 CORS 请求,会在正式通信之前,增加一次 HTTP 查询请求,称为”预检”请求(preflight)。

浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些 HTTP 动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

var url = 'http://api.alice.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();

浏览器发现,这是一个非简单请求,就自动发出一个”预检”请求,要求服务器确认可以这样请求。下面是这个”预检”请求的 HTTP 头信息。

OPTIONS / cors HTTP / 1.1
Origin: http: //api.bob.com
Access - Control - Request - Method: PUT
Access - Control - Request - Headers: X - Custom - Header
Host: api.alice.com
Accept - Language: en - US
Connection: keep - alive
User - Agent: Mozilla / 5.0
...

“预检”请求用的请求方法是 OPTIONS,表示这个请求是用来询问的。头信息里面,关键字段是 Origin,表示请求来自哪个源。

除了 Origin 字段,”预检”请求的头信息包括两个特殊字段。

  • Access-Control-Request-Method:该字段是必须的,用来列出浏览器的 CORS 请求会用到哪些 HTTP 方法,上例是 PUT。
  • Access-Control-Request-Headers:该字段是一个逗号分隔的字符串,指定浏览器 CORS 请求会额外发送的头信息字段,上例是X-Custom-Header

预检请求的回应

服务器收到”预检”请求以后,检查了OriginAccess-Control-Request-MethodAccess-Control-Request-Headers 字段以后,确认允许跨源请求,就可以做出回应

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

上面的 HTTP 回应中,关键的是 Access-Control-Allow-Origin 字段,表示 http://api.bob.com 可以请求数据。该字段也可以设为星号,表示同意任意跨源请求。

如果浏览器否定了”预检”请求,会返回一个正常的 HTTP 回应,但是没有任何 CORS 相关的头信息字段。这时,浏览器就会认定,服务器不同意预检请求,因此触发一个错误,被XMLHttpRequest对象的 onerror 回调函数捕获。控制台会打印出如下的报错信息。

服务器回应的其他 CORS 相关字段如下:

Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000
  • Access-Control-Allow-Methods:该字段必需,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次”预检”请求。
  • Access-Control-Allow-Headers:如果浏览器请求包括Access-Control-Request-Headers字段,则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,不限于浏览器在”预检”中请求的字段。
  • Access-Control-Allow-Credentials: 该字段与简单请求时的含义相同。
  • Access-Control-Max-Age: 该字段可选,用来指定本次预检请求的有效期,单位为秒。上面结果中,有效期是 20 天(1728000 秒),即允许缓存该条回应 1728000 秒(即 20 天),在此期间,不用发出另一条预检请求。

浏览器正常请求回应

一旦服务器通过了”预检”请求,以后每次浏览器正常的 CORS 请求,就都跟简单请求一样,会有一个Origin头信息字段。服务器的回应,也都会有一个Access-Control-Allow-Origin头信息字段。

PUT /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

览器的正常 CORS 请求。上面头信息的Origin字段是浏览器自动添加的。下面是服务器正常的回应。

Access-Control-Allow-Origin: http://api.bob.com
Content-Type: text/html; charset=utf-8

Access-Control-Allow-Origin 字段是每次回应都必定包含的

CORS 与 JSONP 的使用目的相同,但是比 JSONP 更强大。JSONP 只支持 GET 请求,CORS 支持所有类型的 HTTP 请求。JSONP 的优势在于支持老式浏览器,以及可以向不支持 CORS 的网站请求数据。

WebSocket 协议跨域

WebSocket protocol 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是 server push 技术的一种很好的实现。

原生 WebSocket API 使用起来不太方便,我们使用 Socket.io,它很好地封装了 webSocket 接口,提供了更简单、灵活的接口,也对不支持 webSocket 的浏览器提供了向下兼容。

前端代码

<body>
  <div>user input:<input type="text"></div>
  <script src="./socket.io.js"></script>
  <script>
    var socket = io('http://www.domain2.com:8080');

    // 连接成功处理
    socket.on('connect', function() {
      // 监听服务端消息
      socket.on('message', function(msg) {
        console.log('data from server: ---> ' + msg);
      });

      // 监听服务端关闭
      socket.on('disconnect', function() {
        console.log('Server socket has closed.');
      });
    });

    document.getElementsByTagName('input')[0].onblur = function() {
      socket.send(this.value);
    };
  </script>
</body>

服务端代码

var http = require('http');
var socket = require('socket.io');

// 启http服务
var server = http.createServer(function(req, res) {
  res.writeHead(200, {
    'Content-type': 'text/html'
  });
  res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

// 监听socket连接
socket.listen(server).on('connection', function(client) {
  // 接收信息
  client.on('message', function(msg) {
    client.send('hello:' + msg);
    console.log('data from client: ---> ' + msg);
  });

  // 断开处理
  client.on('disconnect', function() {
    console.log('Client socket has closed.');
  });
});

node 代理跨域

node 中间件实现跨域代理,是通过启一个代理服务器,实现数据的转发,也可以通过设置cookieDomainRewrite参数修改响应头中 cookie 中域名,实现当前域的 cookie 写入,方便接口登录认证。

利用 node + express + http-proxy-middleware 搭建一个 proxy 服务器

前端代码

var xhr = new XMLHttpRequest();

// 前端开关:浏览器是否读写cookie
xhr.withCredentials = true;

// 访问http-proxy-middleware代理服务器
xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true);
xhr.send();

服务端代码

var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();

app.use(
  '/',
  proxy({
    // 代理跨域目标接口
    target: 'http://www.domain2.com:8080',
    changeOrigin: true,

    // 修改响应头信息,实现跨域并允许带cookie
    onProxyRes: function(proxyRes, req, res) {
      res.header('Access-Control-Allow-Origin', 'http://www.domain1.com');
      res.header('Access-Control-Allow-Credentials', 'true');
    },

    // 修改响应信息中的cookie域名
    cookieDomainRewrite: 'www.domain1.com' // 可以为false,表示不修改
  })
);

app.listen(3000);
console.log('Proxy server is listen at port 3000...');

nginx 代理跨域

1、nginx 配置解决 iconfont 跨域

浏览器跨域访问 js、css、img 等常规静态资源被同源策略许可,但 iconfont 字体文件(eot|otf|ttf|woff|svg)例外,此时可在 nginx 的静态资源服务器中加入以下配置。

location / {
  add_header Access-Control-Allow-Origin *;
}

2、nginx 反向代理接口跨域

跨域原理: 同源策略是浏览器的安全策略,不是 HTTP 协议的一部分。服务器端调用 HTTP 接口只是使用 HTTP 协议,不会执行 JS 脚本,不需要同源策略,也就不存在跨越问题。

实现思路:通过 nginx 配置一个代理服务器(域名与 domain1 相同,端口不同)做跳板机,反向代理访问 domain2 接口,并且可以顺便修改 cookie 中 domain 信息,方便当前域 cookie 写入,实现跨域登录。

nginx 具体配置

#proxy服务器
server {
    listen       81;
    server_name  www.domain1.com;

    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时,可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

前端代码示例

var http = require('http');
var server = http.createServer();
var qs = require('querystring');

server.on('request', function(req, res) {
  var params = qs.parse(req.url.substring(2));

  // 向前台写cookie
  res.writeHead(200, {
    'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly' // HttpOnly:脚本无法读取
  });

  res.write(JSON.stringify(params));
  res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');