跨域明天入职1

最新推荐文章于 2022-10-12 14:57:49 发布

xxxxxxxr

最新推荐文章于 2022-10-12 14:57:49 发布

阅读量2k

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/xxxxxxxr/article/details/121342421

版权

一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能没有影响，但是更方便程序员使用。. 语法糖让程序更加简洁，有更高的可读性。

让一个div垂直水平居中有两种情况，第一种是元素不固定宽高的，有三种方式

使用绝对定位加transform偏移
使用flex布局，设置align-items:center;justify-content:center;
使用grid布局，设置align-self:center; justify-self:center;

如果元素有固定宽高，可以使用：

绝对定位+transform偏移
绝对定位+负margin值
绝对定位+margin:auto
不固定宽高的三种方式

es5 es6 原型链跨域 vue有什么生命周期

get和post请求的区别前者是递进,后者是提交

最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。 ... GET请求会被浏览器主动cache，而POST不会，除非手动设置。 GET请求只能进行url编码，而POST支持多种编码方式。 GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留

.get请求一般是去取获取数据（其实也可以提交，但常见的是获取数据）；
post请求一般是去提交数据。
2.get因为参数会放在url中，所以隐私性，安全性较差，请求的数据长度是有限制的，
不同的浏览器和服务器不同，一般限制在 2~8K 之间，更加常见的是 1k 以内；
post请求是没有的长度限制，请求数据是放在body中；
3.get请求刷新服务器或者回退没有影响，post请求回退时会重新提交数据请求。
4.get请求可以被缓存，post请求不会被缓存。
5.get请求会被保存在浏览器历史记录当中，post不会。get请求可以被收藏为书签，因为参数就是url中，但post不能。它的参数不在url中。
6.get请求只能进行url编码（appliacation-x-www-form-urlencoded）,post请求支持多种（multipart/form-data等）。
1GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包（但firefox是发送一个数据包），
2.对于 GET 方式的请求，浏览器会把 http header 和 data 一并发送出去，服务器响应 200
（返回数据）表示成功；
而对于 POST，浏览器先发送 header，服务器响应 100，浏览器再继续发送 data，服
务器响应 200 （返回数据）。

1、一般来说GET是获取数据，POST是提交数据的。
2、GET传输数据的时候是在URL地址中的、对所有人都是是可见的、是不安全的、是有浏览器缓存记录的，POST传输的时候是放在HTTP的请求体之中的，并且是经过urlencode编码的所以是相对安全的。
3、HTTP协议并没有对GET和POST的长度做限制，其实是浏览器限制了他们传输大小，URL地址是有长度限制的，浏览器不同长度限制的具体数值也是不一样的，理论上来说POST的长度是没有限制的，但是受服务器的配置限制或者内存大小的限制，造成了实际开发中POST也是有数据长度的限制的。可以在PHP下修改php.conf中的postmaxsize值来设置POST的大小。
4、GET在浏览器回退时是无害的，而POST会再次提交请求。
5、GET参数通过URL传递，POST放在Request body中。

0.5px 细线

一、缩放biefore/after伪元素

　　伪元素进行绝对定位，通过border或者background着色，适合画单线条：

  <div class="fineLine"></div>

  <style type="text/css">
  .fineLine {
      position: relative;
  }
  .fineLine:before,.fineLine:after{
    position: absolute;
    content: " ";
    height: 1px;
    width: 100%;
    left: 0;
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
  }
  .fineLine:before {
      top: 0;
      background: #000;
  }
  .fineLine:after {
      bottom: 0;
      border-bottom: 1px solid #000;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
      .fineLine {
          -webkit-transform: scaleY(.667);
      }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      .fineLine {
          -webkit-transform: scaleY(.5);
      }
  }
  </style>

二、box-shadow模拟

　　box-shaodw适合模拟box四周都需要细线border的情况，而且支持border-radius。此例中演示的是dppx鉴别：

  <div class="fineLine"></div>

  <style type="text/css">
  .fineLine {
      box-shadow: 0 0 0 1px;
  }
  @media (min-resolution: 2dppx) {
      .fineLine {
          box-shadow: 0 0 0 0.5px;
      }
  }
  @media (min-resolution: 3dppx) {
      .fineLine {
          box-shadow: 0 0 0 0.33333333px;
      }
  }
  </style>

px就是表示pixel，像素，是屏幕上显示数据的最基本的点；

pt就是point，是印刷行业常用单位，等于1/72英寸。

1.什么是跨域

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

这里说明一下，无法跨域是浏览器对于用户安全的考虑，如果自己写个没有同源策略的浏览器，完全不用考虑跨域问题了。是浏览器的锅，对。

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

Cookie、LocalStorage 和 IndexDB 无法读取

DOM 和 JS 对象无法获取

Ajax请求发送不出去

2.场景

首先狭义的同源就是指，域名、协议、端口均为相同。

http://www.yyy.cn/index.html 调用 http://www.xxxyyy.cn/server.php 非跨域

http://**www.xxxyyy.cn**/index.html 调用  http://**www.xxx.cn**/server.php  跨域,主域不同

http://**abc**.xxxyyy.cn/index.html 调用  http://**def**.xxx.cn/server.php  跨域,子域名不同

http://www.xxx.cn:**8080**/index.html 调用  http://www.xxx.cn/server.php  跨域,端口不同

**https**://www.xxx.cn/index.html 调用  **http**://www.xxx.cn/server.php  跨域,协议不同

3.如何跨域

3.1.jsonp方式

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

下面是两种前端实现方式：


//原生的实现方式

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

script.src = 'http://www.xxx.com/xxx.js?callback=callback';

document.body.appendChild(script);

function callback(res) {

  console.log(res);

}


//jquery实现方式

$.ajax({

    url:'http://www.xxx.com/login',

    type:'GET',

    dataType:'jsonp',//请求方式为jsonp

    jsonpCallback:'callback',

})

function callback(res) {

  console.log(res);

}

特别注意的是，上面代码里传入的callback参数是服务器传回数据后需要调用的方法，上面代码中方法是callback();

服务器端传回的数据格式应该是

callback(数据)

另外有时会出现406错误，这时候就需要在响应头中添加Access-Control-Allow-Origin,值为*，表示的是允许所有域名访问。

response.setHeader("Access-Control-Allow-Origin", "*");

Jsonp很好用对吧，但只能get请求。

3.2. 跨域资源共享CORS

这是目前主流的解决方案。

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

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

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

基本只需要对服务器动手脚，前端代码跟同源时一样，也就是不跨域时一样。

这种方式分为两种请求：

一种是简单请求，另一种是非简单请求。只要满足下面条件就是简单请求

请求方式为HEAD、POST 或者 GET

http头信息不超出以下字段：

Accept、Accept-Language 

Content-Language

Last-Event-ID

Content-Type(限于三个值：application/x-www-form-urlencoded、multipart/form-data、text/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字段，就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。

注意，这种错误无法通过状态码识别，因为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-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在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

预检请求的回应

服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method和Access-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字段是每次回应都必定包含的

3.3 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;

    }

}

1.) 前端代码示例：


var xhr = new XMLHttpRequest();

// 前端开关：浏览器是否读写cookie

xhr.withCredentials = true;

// 访问nginx中的代理服务器

xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);

xhr.send();

2.) Nodejs后台示例：


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...');

4.结束语

除了文中提供的三种方法，还有诸如websocket、node代理、document.domain + iframe 、window.name + iframe 、location.hash + iframe等几种不同的方式

CORS的方法那一段非常冗长，但比较重要，最好仔细看下。本文大量借鉴 Nealyang 的文章。

作者：phantom_f835
链接：https://www.jianshu.com/p/f049ac7e2220
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

什么是跨域？

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。

广义的跨域：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#f08d49">1.</span><span style="color:#cccccc">)</span> 资源跳转： <span style="color:#f8c555">A</span>链接、重定向、表单提交
<span style="color:#f08d49">2.</span><span style="color:#cccccc">)</span> 资源嵌入： <span style="color:#67cdcc"><</span>link<span style="color:#67cdcc">></span>、<span style="color:#67cdcc"><</span>script<span style="color:#67cdcc">></span>、<span style="color:#67cdcc"><</span>img<span style="color:#67cdcc">></span>、
     <span style="color:#67cdcc"><</span>frame<span style="color:#67cdcc">></span>等dom标签，
    还有样式中background<span style="color:#67cdcc">:</span><span style="color:#f08d49">url</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span>、
    @font<span style="color:#67cdcc">-</span><span style="color:#f08d49">face</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span>等文件外链
<span style="color:#f08d49">3.</span><span style="color:#cccccc">)</span> 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等</span></span></span></span>

其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

什么是同源策略？

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#f08d49">1.</span><span style="color:#cccccc">)</span> Cookie、LocalStorage 和 IndexDB 无法读取
<span style="color:#f08d49">2.</span><span style="color:#cccccc">)</span> <span style="color:#f8c555">DOM</span> 和 Js对象无法获得
<span style="color:#f08d49">3.</span><span style="color:#cccccc">)</span> <span style="color:#f8c555">AJAX</span> 请求不能发送</span></span></span></span>

常见跨域场景

跨域解决方案

1、通过jsonp跨域 2、 document.domain + iframe跨域 3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、跨域资源共享（CORS） 7、 nginx代理跨域 8、 nodejs中间件代理跨域 9、 WebSocket协议跨域

一、通过jsonp跨域

通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

1）原生实现：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#67cdcc"><</span>script<span style="color:#67cdcc">></span>
 <span style="color:#cc99cd">var</span> script <span style="color:#67cdcc">=</span> document<span style="color:#cccccc">.</span><span style="color:#f08d49">createElement</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'script'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
    script<span style="color:#cccccc">.</span>type <span style="color:#67cdcc">=</span> <span style="color:#7ec699">'text/javascript'</span><span style="color:#cccccc">;</span>   
 <span style="color:#999999">// 传参并指定回调执行函数为onBack</span>
 script<span style="color:#cccccc">.</span>src <span style="color:#67cdcc">=</span> 'http<span style="color:#67cdcc">:</span><span style="color:#67cdcc">/</span><span style="color:#7ec699">/www.domain2.com:8080/</span>
              login<span style="color:#67cdcc">?</span>user<span style="color:#67cdcc">=</span>admin<span style="color:#67cdcc">&</span>callback<span style="color:#67cdcc">=</span>onBack'<span style="color:#cccccc">;</span>    
 document<span style="color:#cccccc">.</span>head<span style="color:#cccccc">.</span><span style="color:#f08d49">appendChild</span><span style="color:#cccccc">(</span>script<span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>    
 <span style="color:#999999">// 回调执行函数</span>
    <span style="color:#cc99cd">function</span> <span style="color:#f08d49">onBack</span><span style="color:#cccccc">(</span>res<span style="color:#cccccc">)</span> <span style="color:#cccccc">{</span>
        <span style="color:#f08d49">alert</span><span style="color:#cccccc">(</span><span style="color:#f8c555">JSON</span><span style="color:#cccccc">.</span><span style="color:#f08d49">stringify</span><span style="color:#cccccc">(</span>res<span style="color:#cccccc">)</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
    <span style="color:#cccccc">}</span> <span style="color:#67cdcc"><</span><span style="color:#67cdcc">/</span>script<span style="color:#67cdcc">></span></span></span></span></span>

服务端返回如下（返回时即执行全局函数）：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#f08d49">onBack</span><span style="color:#cccccc">(</span><span style="color:#cccccc">{</span><span style="color:#7ec699">"status"</span><span style="color:#67cdcc">:</span> <span style="color:#f08d49">true</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">"user"</span><span style="color:#67cdcc">:</span> <span style="color:#7ec699">"admin"</span><span style="color:#cccccc">}</span><span style="color:#cccccc">)</span></span></span></span></span>

2）jquery ajax：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc">$<span style="color:#cccccc">.</span><span style="color:#f08d49">ajax</span><span style="color:#cccccc">(</span><span style="color:#cccccc">{</span>    
url<span style="color:#67cdcc">:</span> <span style="color:#7ec699">'http://www.domain2.com:8080/login'</span><span style="color:#cccccc">,</span>    
type<span style="color:#67cdcc">:</span> <span style="color:#7ec699">'get'</span><span style="color:#cccccc">,</span>    dataType<span style="color:#67cdcc">:</span> <span style="color:#7ec699">'jsonp'</span><span style="color:#cccccc">,</span>  
<span style="color:#999999">// 请求方式为jsonp</span>
    jsonpCallback<span style="color:#67cdcc">:</span> <span style="color:#7ec699">"onBack"</span><span style="color:#cccccc">,</span>    
<span style="color:#999999">// 自定义回调函数名</span>
    data<span style="color:#67cdcc">:</span> <span style="color:#cccccc">{</span><span style="color:#cccccc">}</span>
<span style="color:#cccccc">}</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span></span></span></span></span>

3）vue.js：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#cc99cd">this</span><span style="color:#cccccc">.</span>$http<span style="color:#cccccc">.</span><span style="color:#f08d49">jsonp</span><span style="color:#cccccc">(</span>'
http<span style="color:#67cdcc">:</span><span style="color:#67cdcc">/</span><span style="color:#67cdcc">/</span>www<span style="color:#cccccc">.</span>domain2<span style="color:#cccccc">.</span>com<span style="color:#67cdcc">:</span><span style="color:#f08d49">8080</span><span style="color:#67cdcc">/</span>login'<span style="color:#cccccc">,</span> 
<span style="color:#cccccc">{</span>    
params<span style="color:#67cdcc">:</span> <span style="color:#cccccc">{</span><span style="color:#cccccc">}</span><span style="color:#cccccc">,</span>    
jsonp<span style="color:#67cdcc">:</span> <span style="color:#7ec699">'onBack'</span><span style="color:#cccccc">}</span><span style="color:#cccccc">)</span><span style="color:#cccccc">.</span><span style="color:#f08d49">then</span><span style="color:#cccccc">(</span><span style="color:#cccccc">(</span>res<span style="color:#cccccc">)</span> <span style="color:#67cdcc">=></span> 
<span style="color:#cccccc">{</span>    console<span style="color:#cccccc">.</span><span style="color:#f08d49">log</span><span style="color:#cccccc">(</span>res<span style="color:#cccccc">)</span><span style="color:#cccccc">;</span> 
<span style="color:#cccccc">}</span><span style="color:#cccccc">)</span></span></span></span></span>

后端node.js代码示例：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#cc99cd">var</span> querystring <span style="color:#67cdcc">=</span> <span style="color:#f08d49">require</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'querystring'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#cc99cd">var</span> http <span style="color:#67cdcc">=</span> <span style="color:#f08d49">require</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'http'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#cc99cd">var</span> server <span style="color:#67cdcc">=</span> http<span style="color:#cccccc">.</span><span style="color:#f08d49">createServer</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
server<span style="color:#cccccc">.</span><span style="color:#f08d49">on</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'request'</span><span style="color:#cccccc">,</span> <span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span>req<span style="color:#cccccc">,</span> res<span style="color:#cccccc">)</span> <span style="color:#cccccc">{</span>    
<span style="color:#cc99cd">var</span> params <span style="color:#67cdcc">=</span> qs<span style="color:#cccccc">.</span><span style="color:#f08d49">parse</span><span style="color:#cccccc">(</span>req<span style="color:#cccccc">.</span>url<span style="color:#cccccc">.</span><span style="color:#f08d49">split</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'?'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">[</span><span style="color:#f08d49">1</span><span style="color:#cccccc">]</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>    
<span style="color:#cc99cd">var</span> fn <span style="color:#67cdcc">=</span> params<span style="color:#cccccc">.</span>callback<span style="color:#cccccc">;</span>    
<span style="color:#999999">// jsonp返回设置</span>
    res<span style="color:#cccccc">.</span><span style="color:#f08d49">writeHead</span><span style="color:#cccccc">(</span><span style="color:#f08d49">200</span><span style="color:#cccccc">,</span> <span style="color:#cccccc">{</span> 
<span style="color:#7ec699">'Content-Type'</span><span style="color:#67cdcc">:</span> <span style="color:#7ec699">'text/javascript'</span> <span style="color:#cccccc">}</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
    res<span style="color:#cccccc">.</span><span style="color:#f08d49">write</span><span style="color:#cccccc">(</span>fn <span style="color:#67cdcc">+</span> <span style="color:#7ec699">'('</span> <span style="color:#67cdcc">+</span> 
       <span style="color:#f8c555">JSON</span><span style="color:#cccccc">.</span><span style="color:#f08d49">stringify</span><span style="color:#cccccc">(</span>params<span style="color:#cccccc">)</span> <span style="color:#67cdcc">+</span> <span style="color:#7ec699">')'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
    res<span style="color:#cccccc">.</span><span style="color:#f08d49">end</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#cccccc">}</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
server<span style="color:#cccccc">.</span><span style="color:#f08d49">listen</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'8080'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
console<span style="color:#cccccc">.</span><span style="color:#f08d49">log</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'Server is running at port 8080...'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span></span></span></span></span>

jsonp缺点：只能实现get一种请求。

二、 document.domain + iframe跨域

此方案仅限主域相同，子域不同的跨域应用场景。

实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

1）父窗口(http://www.domain.com/a.html)

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#67cdcc"><</span>iframe id<span style="color:#67cdcc">=</span><span style="color:#7ec699">"iframe"</span> 
src<span style="color:#67cdcc">=</span><span style="color:#7ec699">"http://child.domain.com/b.html"</span><span style="color:#67cdcc">></span>
<span style="color:#67cdcc"><</span><span style="color:#67cdcc">/</span>iframe<span style="color:#67cdcc">></span><span style="color:#67cdcc"><</span>script<span style="color:#67cdcc">></span>
document<span style="color:#cccccc">.</span>domain <span style="color:#67cdcc">=</span> <span style="color:#7ec699">'domain.com'</span><span style="color:#cccccc">;</span>    
<span style="color:#cc99cd">var</span> user <span style="color:#67cdcc">=</span> <span style="color:#7ec699">'admin'</span><span style="color:#cccccc">;</span>
<span style="color:#67cdcc"><</span><span style="color:#67cdcc">/</span>script<span style="color:#67cdcc">></span></span></span></span></span>

2）子窗口(http://child.domain.com/b.html)

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#67cdcc"><</span>script<span style="color:#67cdcc">></span>
 document<span style="color:#cccccc">.</span>domain <span style="color:#67cdcc">=</span> <span style="color:#7ec699">'domain.com'</span><span style="color:#cccccc">;</span>    
<span style="color:#999999">// 获取父窗口中变量</span>
 <span style="color:#f08d49">alert</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'get js data from parent ---> '</span>
 <span style="color:#67cdcc">+</span> window<span style="color:#cccccc">.</span>parent<span style="color:#cccccc">.</span>user<span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#67cdcc"><</span><span style="color:#67cdcc">/</span>script<span style="color:#67cdcc">></span></span></span></span></span>

三、 location.hash + iframe跨域

实现原理： a欲与b跨域相互通信，通过中间页c来实现。三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。

具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。

1）a.html：(http://www.domain1.com/a.html)

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#67cdcc"><</span>iframe id<span style="color:#67cdcc">=</span><span style="color:#7ec699">"iframe"</span>
 src<span style="color:#67cdcc">=</span><span style="color:#7ec699">"http://www.domain2.com/b.html"</span> 
  style<span style="color:#67cdcc">=</span><span style="color:#7ec699">"display:none;"</span><span style="color:#67cdcc">></span>
<span style="color:#67cdcc"><</span><span style="color:#67cdcc">/</span>iframe<span style="color:#67cdcc">></span>
<span style="color:#67cdcc"><</span>script<span style="color:#67cdcc">></span>
  <span style="color:#cc99cd">var</span> iframe <span style="color:#67cdcc">=</span> document<span style="color:#cccccc">.</span><span style="color:#f08d49">getElementById</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'iframe'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>    
<span style="color:#999999">// 向b.html传hash值</span>
  <span style="color:#f08d49">setTimeout</span><span style="color:#cccccc">(</span><span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span> <span style="color:#cccccc">{</span>
   iframe<span style="color:#cccccc">.</span>src <span style="color:#67cdcc">=</span> iframe<span style="color:#cccccc">.</span>src <span style="color:#67cdcc">+</span> <span style="color:#7ec699">'#user=admin'</span><span style="color:#cccccc">;</span>
 <span style="color:#cccccc">}</span><span style="color:#cccccc">,</span> <span style="color:#f08d49">1000</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>    
 <span style="color:#999999">// 开放给同域c.html的回调方法</span>
 <span style="color:#cc99cd">function</span> <span style="color:#f08d49">onCallback</span><span style="color:#cccccc">(</span>res<span style="color:#cccccc">)</span> <span style="color:#cccccc">{</span>
 <span style="color:#f08d49">alert</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'data from c.html ---> '</span> <span style="color:#67cdcc">+</span> res<span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
    <span style="color:#cccccc">}</span>
<span style="color:#67cdcc"><</span><span style="color:#67cdcc">/</span>script<span style="color:#67cdcc">></span></span></span></span></span>

2）b.html：(http://www.domain2.com/b.html)

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#67cdcc"><</span>iframe id<span style="color:#67cdcc">=</span><span style="color:#7ec699">"iframe"</span> 
src<span style="color:#67cdcc">=</span><span style="color:#7ec699">"http://www.domain1.com/c.html"</span> 
  style<span style="color:#67cdcc">=</span><span style="color:#7ec699">"display:none;"</span><span style="color:#67cdcc">></span>
<span style="color:#67cdcc"><</span><span style="color:#67cdcc">/</span>iframe<span style="color:#67cdcc">></span>
<span style="color:#67cdcc"><</span>script<span style="color:#67cdcc">></span>
  <span style="color:#cc99cd">var</span> iframe <span style="color:#67cdcc">=</span> document<span style="color:#cccccc">.</span><span style="color:#f08d49">getElementById</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'iframe'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>    
<span style="color:#999999">// 监听a.html传来的hash值，再传给c.html</span>
  window<span style="color:#cccccc">.</span><span style="color:#f08d49">onhashchange</span> <span style="color:#67cdcc">=</span> <span style="color:#cc99cd">function</span> <span style="color:#cccccc">(</span><span style="color:#cccccc">)</span> <span style="color:#cccccc">{</span>
  iframe<span style="color:#cccccc">.</span>src <span style="color:#67cdcc">=</span> iframe<span style="color:#cccccc">.</span>src <span style="color:#67cdcc">+</span> location<span style="color:#cccccc">.</span>hash<span style="color:#cccccc">;</span>
    <span style="color:#cccccc">}</span><span style="color:#cccccc">;</span>
<span style="color:#67cdcc"><</span><span style="color:#67cdcc">/</span>script<span style="color:#67cdcc">></span></span></span></span></span>

3）c.html：(http://www.domain1.com/c.html)

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#67cdcc"><</span>script<span style="color:#67cdcc">></span>
 <span style="color:#999999">// 监听b.html传来的hash值</span>
 window<span style="color:#cccccc">.</span><span style="color:#f08d49">onhashchange</span> <span style="color:#67cdcc">=</span> <span style="color:#cc99cd">function</span> <span style="color:#cccccc">(</span><span style="color:#cccccc">)</span> <span style="color:#cccccc">{</span>        
 <span style="color:#999999">// 再通过操作同域a.html的js回调，</span>
 将结果传回
 window<span style="color:#cccccc">.</span>parent<span style="color:#cccccc">.</span>parent<span style="color:#cccccc">.</span><span style="color:#f08d49">onCallback</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'hello: '</span>
 <span style="color:#67cdcc">+</span> location<span style="color:#cccccc">.</span>hash<span style="color:#cccccc">.</span><span style="color:#f08d49">replace</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'#user='</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">''</span><span style="color:#cccccc">)</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
    <span style="color:#cccccc">}</span><span style="color:#cccccc">;</span>
  <span style="color:#67cdcc"><</span><span style="color:#67cdcc">/</span>script<span style="color:#67cdcc">></span></span></span></span></span>

四、 window.name + iframe跨域

window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

1）a.html：(http://www.domain1.com/a.html)

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#cc99cd">var</span> <span style="color:#f08d49">proxy</span> <span style="color:#67cdcc">=</span> <span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span>url<span style="color:#cccccc">,</span> callback<span style="color:#cccccc">)</span> 
<span style="color:#cccccc">{</span>    
 <span style="color:#cc99cd">var</span> state <span style="color:#67cdcc">=</span> <span style="color:#f08d49">0</span><span style="color:#cccccc">;</span>    
<span style="color:#cc99cd">var</span> iframe <span style="color:#67cdcc">=</span> document<span style="color:#cccccc">.</span><span style="color:#f08d49">createElement</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'iframe'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>    
 <span style="color:#999999">// 加载跨域页面</span>
 iframe<span style="color:#cccccc">.</span>src <span style="color:#67cdcc">=</span> url<span style="color:#cccccc">;</span>    
 <span style="color:#999999">// onload事件会触发2次，</span>
 第<span style="color:#f08d49">1</span>次加载跨域页，
并留存数据于window<span style="color:#cccccc">.</span>name
iframe<span style="color:#cccccc">.</span><span style="color:#f08d49">onload</span> <span style="color:#67cdcc">=</span> <span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span>
  <span style="color:#cccccc">{</span>        
  <span style="color:#cc99cd">if</span> <span style="color:#cccccc">(</span>state <span style="color:#67cdcc">===</span> <span style="color:#f08d49">1</span><span style="color:#cccccc">)</span> 
  <span style="color:#cccccc">{</span>            
 <span style="color:#999999">// 第2次onload(同域proxy页)成功后，</span>
 读取同域window<span style="color:#cccccc">.</span>name中数据
<span style="color:#f08d49">callback</span><span style="color:#cccccc">(</span>iframe<span style="color:#cccccc">.</span>contentWindow<span style="color:#cccccc">.</span>name<span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
  <span style="color:#f08d49">destoryFrame</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
   <span style="color:#cccccc">}</span> 
<span style="color:#cc99cd">else</span> <span style="color:#cc99cd">if</span> <span style="color:#cccccc">(</span>state <span style="color:#67cdcc">===</span> <span style="color:#f08d49">0</span><span style="color:#cccccc">)</span> 
  <span style="color:#cccccc">{</span>            
 <span style="color:#999999">// 第1次onload(跨域页)成功后，</span>
 切换到同域代理页面
 iframe<span style="color:#cccccc">.</span>contentWindow<span style="color:#cccccc">.</span>location <span style="color:#67cdcc">=</span> 
  <span style="color:#7ec699">'http://www.domain1.com/proxy.html'</span><span style="color:#cccccc">;</span>
  state <span style="color:#67cdcc">=</span> <span style="color:#f08d49">1</span><span style="color:#cccccc">;</span>
    <span style="color:#cccccc">}</span>
    <span style="color:#cccccc">}</span><span style="color:#cccccc">;</span>    
 document<span style="color:#cccccc">.</span>body<span style="color:#cccccc">.</span><span style="color:#f08d49">appendChild</span><span style="color:#cccccc">(</span>iframe<span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>    
  <span style="color:#999999">// 获取数据以后销毁这个iframe，</span>
  释放内存；
 这也保证了安全（不被其他域frame js访问）
 <span style="color:#cc99cd">function</span> <span style="color:#f08d49">destoryFrame</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span> <span style="color:#cccccc">{</span>
 iframe<span style="color:#cccccc">.</span>contentWindow<span style="color:#cccccc">.</span>document<span style="color:#cccccc">.</span><span style="color:#f08d49">write</span><span style="color:#cccccc">(</span><span style="color:#7ec699">''</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
 iframe<span style="color:#cccccc">.</span>contentWindow<span style="color:#cccccc">.</span><span style="color:#f08d49">close</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>        
  document<span style="color:#cccccc">.</span>body<span style="color:#cccccc">.</span><span style="color:#f08d49">removeChild</span><span style="color:#cccccc">(</span>iframe<span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
    <span style="color:#cccccc">}</span>
<span style="color:#cccccc">}</span><span style="color:#cccccc">;</span>
 <span style="color:#999999">// 请求跨域b页面数据proxy</span>
 <span style="color:#cccccc">(</span><span style="color:#7ec699">'http://www.domain2.com/b.html'</span><span style="color:#cccccc">,</span> 
 <span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span>data<span style="color:#cccccc">)</span>
     <span style="color:#cccccc">{</span>
    <span style="color:#f08d49">alert</span><span style="color:#cccccc">(</span>data<span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#cccccc">}</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span></span></span></span></span>

2）proxy.html：(http://www.domain1.com/proxy.... 中间代理页，与a.html同域，内容为空即可。

3）b.html：(http://www.domain2.com/b.html)

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#67cdcc"><</span>script<span style="color:#67cdcc">></span>
 window<span style="color:#cccccc">.</span>name <span style="color:#67cdcc">=</span> <span style="color:#7ec699">'This is domain2 data!'</span><span style="color:#cccccc">;</span>
<span style="color:#67cdcc"><</span><span style="color:#67cdcc">/</span>script<span style="color:#67cdcc">></span></span></span></span></span>

总结：通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。

五、 postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc">a<span style="color:#cccccc">.</span>） 页面和其打开的新窗口的数据传递
b<span style="color:#cccccc">.</span>） 多窗口之间消息传递
c<span style="color:#cccccc">.</span>） 页面与嵌套的iframe消息传递
d<span style="color:#cccccc">.</span>） 上面三个场景的跨域数据传递</span></span></span></span>

用法：postMessage(data,origin)方法接受两个参数 data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。 origin：协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

1）a.html：(http://www.domain1.com/a.html)

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#67cdcc"><</span>iframe id<span style="color:#67cdcc">=</span><span style="color:#7ec699">"iframe"</span> 
src<span style="color:#67cdcc">=</span><span style="color:#7ec699">"http://www.domain2.com/b.html"</span> 
style<span style="color:#67cdcc">=</span><span style="color:#7ec699">"display:none;"</span><span style="color:#67cdcc">></span>
<span style="color:#67cdcc"><</span><span style="color:#67cdcc">/</span>iframe<span style="color:#67cdcc">></span>
<span style="color:#67cdcc"><</span>script<span style="color:#67cdcc">></span>       
 <span style="color:#cc99cd">var</span> iframe <span style="color:#67cdcc">=</span> document<span style="color:#cccccc">.</span><span style="color:#f08d49">getElementById</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'iframe'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
 iframe<span style="color:#cccccc">.</span><span style="color:#f08d49">onload</span> <span style="color:#67cdcc">=</span> <span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span> 
<span style="color:#cccccc">{</span>        
<span style="color:#cc99cd">var</span> data <span style="color:#67cdcc">=</span> <span style="color:#cccccc">{</span>           
 name<span style="color:#67cdcc">:</span> <span style="color:#7ec699">'aym'</span>
        <span style="color:#cccccc">}</span><span style="color:#cccccc">;</span>        
 <span style="color:#999999">// 向domain2传送跨域数据</span>
  iframe<span style="color:#cccccc">.</span>contentWindow<span style="color:#cccccc">.</span><span style="color:#f08d49">postMessage</span>
 <span style="color:#cccccc">(</span><span style="color:#f8c555">JSON</span><span style="color:#cccccc">.</span><span style="color:#f08d49">stringify</span><span style="color:#cccccc">(</span>data<span style="color:#cccccc">)</span><span style="color:#cccccc">,</span>
  <span style="color:#7ec699">'http://www.domain2.com'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
    <span style="color:#cccccc">}</span><span style="color:#cccccc">;</span>    
  <span style="color:#999999">// 接受domain2返回数据</span>
    window<span style="color:#cccccc">.</span><span style="color:#f08d49">addEventListener</span>
  <span style="color:#cccccc">(</span><span style="color:#7ec699">'message'</span><span style="color:#cccccc">,</span> <span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span>e<span style="color:#cccccc">)</span> <span style="color:#cccccc">{</span>
   <span style="color:#f08d49">alert</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'data from domain2 ---> '</span> <span style="color:#67cdcc">+</span> e<span style="color:#cccccc">.</span>data<span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
    <span style="color:#cccccc">}</span><span style="color:#cccccc">,</span> 
  <span style="color:#f08d49">false</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
  <span style="color:#67cdcc"><</span><span style="color:#67cdcc">/</span>script<span style="color:#67cdcc">></span></span></span></span></span>

2）b.html：(http://www.domain2.com/b.html)

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#67cdcc"><</span>script<span style="color:#67cdcc">></span>
  <span style="color:#999999">// 接收domain1的数据</span>
  window<span style="color:#cccccc">.</span><span style="color:#f08d49">addEventListener</span>
<span style="color:#cccccc">(</span><span style="color:#7ec699">'message'</span><span style="color:#cccccc">,</span> <span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span>e<span style="color:#cccccc">)</span> <span style="color:#cccccc">{</span>
  <span style="color:#f08d49">alert</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'data from domain1 ---> '</span> <span style="color:#67cdcc">+</span> e<span style="color:#cccccc">.</span>data<span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>        
<span style="color:#cc99cd">var</span> data <span style="color:#67cdcc">=</span> <span style="color:#f8c555">JSON</span><span style="color:#cccccc">.</span><span style="color:#f08d49">parse</span><span style="color:#cccccc">(</span>e<span style="color:#cccccc">.</span>data<span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>        
<span style="color:#cc99cd">if</span> <span style="color:#cccccc">(</span>data<span style="color:#cccccc">)</span> <span style="color:#cccccc">{</span>
     data<span style="color:#cccccc">.</span>number <span style="color:#67cdcc">=</span> <span style="color:#f08d49">16</span><span style="color:#cccccc">;</span>            
<span style="color:#999999">// 处理后再发回domain1</span>
window<span style="color:#cccccc">.</span>parent<span style="color:#cccccc">.</span><span style="color:#f08d49">postMessage</span><span style="color:#cccccc">(</span><span style="color:#f8c555">JSON</span><span style="color:#cccccc">.</span><span style="color:#f08d49">stringify</span><span style="color:#cccccc">(</span>data<span style="color:#cccccc">)</span><span style="color:#cccccc">,</span>
 <span style="color:#7ec699">'http://www.domain1.com'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
        <span style="color:#cccccc">}</span>
    <span style="color:#cccccc">}</span><span style="color:#cccccc">,</span> <span style="color:#f08d49">false</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#67cdcc"><</span><span style="color:#67cdcc">/</span>script<span style="color:#67cdcc">></span></span></span></span></span>

六、跨域资源共享（CORS）

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。

需注意的是：由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。如果想实现当前页cookie的写入，可参考下文：七、nginx反向代理中设置proxy_cookie_domain 和八、NodeJs中间件代理中cookieDomainRewrite参数的设置。

目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。

1、前端设置：

1）原生ajax

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#999999">// 前端设置是否带</span>
cookiexhr<span style="color:#cccccc">.</span>withCredentials <span style="color:#67cdcc">=</span> <span style="color:#f08d49">true</span><span style="color:#cccccc">;</span></span></span></span></span>

示例代码：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#cc99cd">var</span> xhr <span style="color:#67cdcc">=</span> <span style="color:#cc99cd">new</span> <span style="color:#f8c555">XMLHttpRequest</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#999999">// IE8/9需用</span>
window<span style="color:#cccccc">.</span>XDomainRequest兼容
<span style="color:#999999">// 前端设置是否带</span>
cookiexhr<span style="color:#cccccc">.</span>withCredentials <span style="color:#67cdcc">=</span> <span style="color:#f08d49">true</span><span style="color:#cccccc">;</span>
xhr<span style="color:#cccccc">.</span><span style="color:#f08d49">open</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'post'</span><span style="color:#cccccc">,</span> 
<span style="color:#7ec699">'http://www.domain2.com:8080/login'</span><span style="color:#cccccc">,</span> <span style="color:#f08d49">true</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
xhr<span style="color:#cccccc">.</span><span style="color:#f08d49">setRequestHeader</span>
<span style="color:#cccccc">(</span><span style="color:#7ec699">'Content-Type'</span><span style="color:#cccccc">,</span> '
application<span style="color:#67cdcc">/</span>x<span style="color:#67cdcc">-</span>www<span style="color:#67cdcc">-</span>form<span style="color:#67cdcc">-</span>urlencoded'<span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
xhr<span style="color:#cccccc">.</span><span style="color:#f08d49">send</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'user=admin'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
xhr<span style="color:#cccccc">.</span><span style="color:#f08d49">onreadystatechange</span> <span style="color:#67cdcc">=</span> <span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span> 
<span style="color:#cccccc">{</span>    
<span style="color:#cc99cd">if</span> <span style="color:#cccccc">(</span>xhr<span style="color:#cccccc">.</span>readyState <span style="color:#67cdcc">==</span> <span style="color:#f08d49">4</span> <span style="color:#67cdcc">&&</span> xhr<span style="color:#cccccc">.</span>status <span style="color:#67cdcc">==</span> <span style="color:#f08d49">200</span><span style="color:#cccccc">)</span> 
<span style="color:#cccccc">{</span>
   <span style="color:#f08d49">alert</span><span style="color:#cccccc">(</span>xhr<span style="color:#cccccc">.</span>responseText<span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
    <span style="color:#cccccc">}</span>
<span style="color:#cccccc">}</span><span style="color:#cccccc">;</span></span></span></span></span>

2）jQuery ajax

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc">$<span style="color:#cccccc">.</span><span style="color:#f08d49">ajax</span><span style="color:#cccccc">(</span><span style="color:#cccccc">{</span>
    <span style="color:#67cdcc">...</span>
 xhrFields<span style="color:#67cdcc">:</span> <span style="color:#cccccc">{</span>
 withCredentials<span style="color:#67cdcc">:</span> <span style="color:#f08d49">true</span>    
 <span style="color:#999999">// 前端设置是否带cookie   </span>
 <span style="color:#cccccc">}</span><span style="color:#cccccc">,</span>
 crossDomain<span style="color:#67cdcc">:</span> <span style="color:#f08d49">true</span><span style="color:#cccccc">,</span>   
 <span style="color:#999999">// 会让请求头中包含跨域的额外信息，</span>
 但不会含cookie
    <span style="color:#67cdcc">...</span>
<span style="color:#cccccc">}</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span></span></span></span></span>

3）vue框架在vue-resource封装的ajax组件中加入以下代码：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc">Vue<span style="color:#cccccc">.</span>http<span style="color:#cccccc">.</span>options<span style="color:#cccccc">.</span>credentials <span style="color:#67cdcc">=</span> <span style="color:#f08d49">true</span></span></span></span></span>

2、服务端设置：

若后端设置成功，前端浏览器控制台则不会出现跨域报错信息，反之，说明没设成功。

1.）Java后台：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#999999">/*
 * 导入包：
  import javax.servlet.http.HttpServletResponse;
 * 接口参数中定义：
  HttpServletResponse response
 */</span>response<span style="color:#cccccc">.</span><span style="color:#f08d49">setHeader</span>
  <span style="color:#cccccc">(</span><span style="color:#7ec699">"Access-Control-Allow-Origin"</span><span style="color:#cccccc">,</span>
 <span style="color:#7ec699">"http://www.domain1.com"</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>  
<span style="color:#999999">// 若有端口需写全（协议+域名+端口）</span>
response<span style="color:#cccccc">.</span><span style="color:#f08d49">setHeader</span>
<span style="color:#cccccc">(</span><span style="color:#7ec699">"Access-Control-Allow-Credentials"</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">"true"</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span></span></span></span></span>

2.）Nodejs后台示例：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#cc99cd">var</span> http <span style="color:#67cdcc">=</span> <span style="color:#f08d49">require</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'http'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#cc99cd">var</span> server <span style="color:#67cdcc">=</span> http<span style="color:#cccccc">.</span><span style="color:#f08d49">createServer</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#cc99cd">var</span> qs <span style="color:#67cdcc">=</span> <span style="color:#f08d49">require</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'querystring'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
server<span style="color:#cccccc">.</span><span style="color:#f08d49">on</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'request'</span><span style="color:#cccccc">,</span> <span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span>req<span style="color:#cccccc">,</span> res<span style="color:#cccccc">)</span> 
<span style="color:#cccccc">{</span>    
<span style="color:#cc99cd">var</span> postData <span style="color:#67cdcc">=</span> <span style="color:#7ec699">''</span><span style="color:#cccccc">;</span>    
<span style="color:#999999">// 数据块接收中</span>
 req<span style="color:#cccccc">.</span><span style="color:#f08d49">addListener</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'data'</span><span style="color:#cccccc">,</span> 
  <span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span>chunk<span style="color:#cccccc">)</span> <span style="color:#cccccc">{</span>
   postData <span style="color:#67cdcc">+=</span> chunk<span style="color:#cccccc">;</span>
    <span style="color:#cccccc">}</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>    
<span style="color:#999999">// 数据接收完毕</span>
 req<span style="color:#cccccc">.</span><span style="color:#f08d49">addListener</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'end'</span><span style="color:#cccccc">,</span> 
<span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span> 
<span style="color:#cccccc">{</span>
  postData <span style="color:#67cdcc">=</span> qs<span style="color:#cccccc">.</span><span style="color:#f08d49">parse</span><span style="color:#cccccc">(</span>postData<span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>        
<span style="color:#999999">// 跨域后台设置</span>
   res<span style="color:#cccccc">.</span><span style="color:#f08d49">writeHead</span><span style="color:#cccccc">(</span><span style="color:#f08d49">200</span><span style="color:#cccccc">,</span> <span style="color:#cccccc">{</span>           
<span style="color:#7ec699">'Access-Control-Allow-Credentials'</span><span style="color:#67cdcc">:</span> 
  <span style="color:#7ec699">'true'</span><span style="color:#cccccc">,</span>    
 <span style="color:#999999">// 后端允许发送Cookie</span>
 <span style="color:#7ec699">'Access-Control-Allow-Origin'</span><span style="color:#67cdcc">:</span> 
 <span style="color:#7ec699">'http://www.domain1.com'</span><span style="color:#cccccc">,</span>   
 <span style="color:#999999">// 允许访问的域（协议+域名+端口）</span>
   <span style="color:#7ec699">'Set-Cookie'</span><span style="color:#67cdcc">:</span> 
 'l<span style="color:#67cdcc">=</span>a123456<span style="color:#cccccc">;</span>Path<span style="color:#67cdcc">=</span><span style="color:#67cdcc">/</span><span style="color:#cccccc">;</span>Domain<span style="color:#67cdcc">=</span>www<span style="color:#cccccc">.</span>domain2<span style="color:#cccccc">.</span>com<span style="color:#cccccc">;</span>
  HttpOnly'  
  <span style="color:#999999">// HttpOnly:脚本无法读取cookie</span>
        <span style="color:#cccccc">}</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
  res<span style="color:#cccccc">.</span><span style="color:#f08d49">write</span><span style="color:#cccccc">(</span><span style="color:#f8c555">JSON</span><span style="color:#cccccc">.</span><span style="color:#f08d49">stringify</span><span style="color:#cccccc">(</span>postData<span style="color:#cccccc">)</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
   res<span style="color:#cccccc">.</span><span style="color:#f08d49">end</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
    <span style="color:#cccccc">}</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#cccccc">}</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
server<span style="color:#cccccc">.</span><span style="color:#f08d49">listen</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'8080'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
console<span style="color:#cccccc">.</span><span style="color:#f08d49">log</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'Server is running at port 8080...'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span></span></span></span></span>

七、 nginx代理跨域

1、 nginx配置解决iconfont跨域

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

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc">location <span style="color:#67cdcc">/</span> <span style="color:#cccccc">{</span>
  add_header 
Access<span style="color:#67cdcc">-</span>Control<span style="color:#67cdcc">-</span>Allow<span style="color:#67cdcc">-</span>Origin <span style="color:#67cdcc">*</span><span style="color:#cccccc">;</span>
<span style="color:#cccccc">}</span></span></span></span></span>

2、 nginx反向代理接口跨域

nginx具体配置：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc">#proxy服务器server <span style="color:#cccccc">{</span>   
 listen      
  <span style="color:#f08d49">81</span><span style="color:#cccccc">;</span>    
  server_name  www<span style="color:#cccccc">.</span>domain1<span style="color:#cccccc">.</span>com<span style="color:#cccccc">;</span>    
  location <span style="color:#67cdcc">/</span> <span style="color:#cccccc">{</span>        
  proxy_pass   
  http<span style="color:#67cdcc">:</span><span style="color:#67cdcc">/</span><span style="color:#67cdcc">/</span>www<span style="color:#cccccc">.</span>domain2<span style="color:#cccccc">.</span>com<span style="color:#67cdcc">:</span><span style="color:#f08d49">8080</span><span style="color:#cccccc">;</span>  
  #反向代理
  proxy_cookie_domain 
      www<span style="color:#cccccc">.</span>domain2<span style="color:#cccccc">.</span>com www<span style="color:#cccccc">.</span>domain1<span style="color:#cccccc">.</span>com<span style="color:#cccccc">;</span>
   #修改cookie里域名
  index  index<span style="color:#cccccc">.</span>html index<span style="color:#cccccc">.</span>htm<span style="color:#cccccc">;</span>       
 # 当用webpack<span style="color:#67cdcc">-</span>dev<span style="color:#67cdcc">-</span>server等中间件代理接口访问nignx时，
   此时无浏览器参与，
   故没有同源限制，
   下面的跨域配置可不启用
  add_header Access<span style="color:#67cdcc">-</span>Control<span style="color:#67cdcc">-</span>Allow<span style="color:#67cdcc">-</span>Origin 
     http<span style="color:#67cdcc">:</span><span style="color:#67cdcc">/</span><span style="color:#67cdcc">/</span>www<span style="color:#cccccc">.</span>domain1<span style="color:#cccccc">.</span>com<span style="color:#cccccc">;</span>  
  #当前端只跨域不带cookie时，
  可为<span style="color:#67cdcc">*</span>
add_header Access<span style="color:#67cdcc">-</span>Control<span style="color:#67cdcc">-</span>Allow<span style="color:#67cdcc">-</span>Credentials <span style="color:#f08d49">true</span><span style="color:#cccccc">;</span>
    <span style="color:#cccccc">}</span>
<span style="color:#cccccc">}</span></span></span></span></span>

1) 前端代码示例：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#cc99cd">var</span> xhr <span style="color:#67cdcc">=</span> <span style="color:#cc99cd">new</span> <span style="color:#f8c555">XMLHttpRequest</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#999999">// 前端开关：</span>
浏览器是否读写cookiexhr<span style="color:#cccccc">.</span>withCredentials <span style="color:#67cdcc">=</span> <span style="color:#f08d49">true</span><span style="color:#cccccc">;</span>
<span style="color:#999999">// 访问nginx中的代理服务器</span>
xhr<span style="color:#cccccc">.</span><span style="color:#f08d49">open</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'get'</span><span style="color:#cccccc">,</span> 
   <span style="color:#7ec699">'http://www.domain1.com:81/?user=admin'</span><span style="color:#cccccc">,</span> <span style="color:#f08d49">true</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
xhr<span style="color:#cccccc">.</span><span style="color:#f08d49">send</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span></span></span></span></span>

2) Nodejs后台示例：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#cc99cd">var</span> http <span style="color:#67cdcc">=</span> <span style="color:#f08d49">require</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'http'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#cc99cd">var</span> server <span style="color:#67cdcc">=</span> http<span style="color:#cccccc">.</span><span style="color:#f08d49">createServer</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#cc99cd">var</span> qs <span style="color:#67cdcc">=</span> <span style="color:#f08d49">require</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'querystring'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
server<span style="color:#cccccc">.</span><span style="color:#f08d49">on</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'request'</span><span style="color:#cccccc">,</span> <span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span>req<span style="color:#cccccc">,</span> res<span style="color:#cccccc">)</span> 
<span style="color:#cccccc">{</span>    
<span style="color:#cc99cd">var</span> params <span style="color:#67cdcc">=</span> qs<span style="color:#cccccc">.</span><span style="color:#f08d49">parse</span><span style="color:#cccccc">(</span>req<span style="color:#cccccc">.</span>url<span style="color:#cccccc">.</span><span style="color:#f08d49">substring</span><span style="color:#cccccc">(</span><span style="color:#f08d49">2</span><span style="color:#cccccc">)</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>    
<span style="color:#999999">// 向前台写cookie</span>
    res<span style="color:#cccccc">.</span><span style="color:#f08d49">writeHead</span><span style="color:#cccccc">(</span><span style="color:#f08d49">200</span><span style="color:#cccccc">,</span> <span style="color:#cccccc">{</span>        
<span style="color:#7ec699">'Set-Cookie'</span><span style="color:#67cdcc">:</span> 'l<span style="color:#67cdcc">=</span>a123456<span style="color:#cccccc">;</span>
Path<span style="color:#67cdcc">=</span><span style="color:#67cdcc">/</span><span style="color:#cccccc">;</span>Domain<span style="color:#67cdcc">=</span>www<span style="color:#cccccc">.</span>domain2<span style="color:#cccccc">.</span>com<span style="color:#cccccc">;</span>HttpOnly'   
<span style="color:#999999">// HttpOnly:脚本无法读取</span>
    <span style="color:#cccccc">}</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
    res<span style="color:#cccccc">.</span><span style="color:#f08d49">write</span><span style="color:#cccccc">(</span><span style="color:#f8c555">JSON</span><span style="color:#cccccc">.</span><span style="color:#f08d49">stringify</span><span style="color:#cccccc">(</span>params<span style="color:#cccccc">)</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
    res<span style="color:#cccccc">.</span><span style="color:#f08d49">end</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#cccccc">}</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
server<span style="color:#cccccc">.</span><span style="color:#f08d49">listen</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'8080'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
console<span style="color:#cccccc">.</span><span style="color:#f08d49">log</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'Server is running at port 8080...'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span></span></span></span></span>

八、 Nodejs中间件代理跨域

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

1、非vue框架的跨域（2次跨域）

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

1）前端代码示例：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#cc99cd">var</span> xhr <span style="color:#67cdcc">=</span> <span style="color:#cc99cd">new</span> <span style="color:#f8c555">XMLHttpRequest</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#999999">// 前端开关：</span>
浏览器是否读写cookiexhr<span style="color:#cccccc">.</span>withCredentials <span style="color:#67cdcc">=</span> <span style="color:#f08d49">true</span><span style="color:#cccccc">;</span>
<span style="color:#999999">// 访问http-proxy-middleware代理服务器</span>
xhr<span style="color:#cccccc">.</span><span style="color:#f08d49">open</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'get'</span><span style="color:#cccccc">,</span> '
http<span style="color:#67cdcc">:</span><span style="color:#67cdcc">/</span><span style="color:#67cdcc">/</span>www<span style="color:#cccccc">.</span>domain1<span style="color:#cccccc">.</span>com<span style="color:#67cdcc">:</span><span style="color:#f08d49">3000</span><span style="color:#67cdcc">/</span>login<span style="color:#67cdcc">?</span>
  user<span style="color:#67cdcc">=</span>admin'<span style="color:#cccccc">,</span> <span style="color:#f08d49">true</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
xhr<span style="color:#cccccc">.</span><span style="color:#f08d49">send</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span></span></span></span></span>

2）中间件服务器：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#cc99cd">var</span> express <span style="color:#67cdcc">=</span> <span style="color:#f08d49">require</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'express'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#cc99cd">var</span> proxy <span style="color:#67cdcc">=</span> <span style="color:#f08d49">require</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'http-proxy-middleware'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#cc99cd">var</span> app <span style="color:#67cdcc">=</span> <span style="color:#f08d49">express</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
app<span style="color:#cccccc">.</span><span style="color:#f08d49">use</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'/'</span><span style="color:#cccccc">,</span> <span style="color:#f08d49">proxy</span><span style="color:#cccccc">(</span><span style="color:#cccccc">{</span>    
<span style="color:#999999">// 代理跨域目标接口</span>
target<span style="color:#67cdcc">:</span> <span style="color:#7ec699">'http://www.domain2.com:8080'</span><span style="color:#cccccc">,</span>    
changeOrigin<span style="color:#67cdcc">:</span> <span style="color:#f08d49">true</span><span style="color:#cccccc">,</span>    
<span style="color:#999999">// 修改响应头信息，实现跨域并允许带cookie</span>
    <span style="color:#f08d49">onProxyRes</span><span style="color:#67cdcc">:</span> <span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span>proxyRes<span style="color:#cccccc">,</span> req<span style="color:#cccccc">,</span> res<span style="color:#cccccc">)</span> <span style="color:#cccccc">{</span>
    res<span style="color:#cccccc">.</span><span style="color:#f08d49">header</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'Access-Control-Allow-Origin'</span><span style="color:#cccccc">,</span> 
    <span style="color:#7ec699">'http://www.domain1.com'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
   res<span style="color:#cccccc">.</span><span style="color:#f08d49">header</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'Access-Control-Allow-Credentials'</span><span style="color:#cccccc">,</span> 
    <span style="color:#7ec699">'true'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
    <span style="color:#cccccc">}</span><span style="color:#cccccc">,</span>   
     <span style="color:#999999">// 修改响应信息中的cookie域名</span>
    cookieDomainRewrite<span style="color:#67cdcc">:</span> <span style="color:#7ec699">'www.domain1.com'</span>  
     <span style="color:#999999">// 可以为false，表示不修改}));</span>
app<span style="color:#cccccc">.</span><span style="color:#f08d49">listen</span><span style="color:#cccccc">(</span><span style="color:#f08d49">3000</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>console<span style="color:#cccccc">.</span><span style="color:#f08d49">log</span><span style="color:#cccccc">(</span>'
     Proxy server is listen at port <span style="color:#f08d49">3000.</span><span style="color:#cccccc">.</span><span style="color:#cccccc">.</span>'<span style="color:#cccccc">)</span><span style="color:#cccccc">;</span></span></span></span></span>

3.）Nodejs后台同（六：nginx）

2、 vue框架的跨域（1次跨域）

利用node + webpack + webpack-dev-server代理接口跨域。在开发环境下，由于vue渲染服务和接口代理服务都是webpack-dev-server同一个，所以页面与代理接口之间不再跨域，无须设置headers跨域信息了。

webpack.config.js部分配置：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc">module<span style="color:#cccccc">.</span>exports <span style="color:#67cdcc">=</span> <span style="color:#cccccc">{</span>    
entry<span style="color:#67cdcc">:</span> <span style="color:#cccccc">{</span><span style="color:#cccccc">}</span><span style="color:#cccccc">,</span>    
module<span style="color:#67cdcc">:</span> <span style="color:#cccccc">{</span><span style="color:#cccccc">}</span><span style="color:#cccccc">,</span>
    <span style="color:#67cdcc">...</span>
devServer<span style="color:#67cdcc">:</span> <span style="color:#cccccc">{</span>        
historyApiFallback<span style="color:#67cdcc">:</span> <span style="color:#f08d49">true</span><span style="color:#cccccc">,</span>        
proxy<span style="color:#67cdcc">:</span> <span style="color:#cccccc">[</span><span style="color:#cccccc">{</span>            
context<span style="color:#67cdcc">:</span> <span style="color:#7ec699">'/login'</span><span style="color:#cccccc">,</span>            
target<span style="color:#67cdcc">:</span> <span style="color:#7ec699">'http://www.domain2.com:8080'</span><span style="color:#cccccc">,</span>  
<span style="color:#999999">// 代理跨域目标接口</span>
    changeOrigin<span style="color:#67cdcc">:</span> <span style="color:#f08d49">true</span><span style="color:#cccccc">,</span>            
secure<span style="color:#67cdcc">:</span> <span style="color:#f08d49">false</span><span style="color:#cccccc">,</span>  
<span style="color:#999999">// 当代理某些https服务报错时用</span>
   cookieDomainRewrite<span style="color:#67cdcc">:</span> <span style="color:#7ec699">'www.domain1.com'</span>  
<span style="color:#999999">// 可以为false，表示不修改</span>
        <span style="color:#cccccc">}</span><span style="color:#cccccc">]</span><span style="color:#cccccc">,</span>        
noInfo<span style="color:#67cdcc">:</span> <span style="color:#f08d49">true</span>
    <span style="color:#cccccc">}</span>
<span style="color:#cccccc">}</span></span></span></span></span>

九、 WebSocket协议跨域

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

1）前端代码：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#67cdcc"><</span>div<span style="color:#67cdcc">></span>user input：
<span style="color:#67cdcc"><</span>input type<span style="color:#67cdcc">=</span><span style="color:#7ec699">"text"</span><span style="color:#67cdcc">></span>
<span style="color:#67cdcc"><</span><span style="color:#67cdcc">/</span>div<span style="color:#67cdcc">></span>
<span style="color:#67cdcc"><</span>script src<span style="color:#67cdcc">=</span><span style="color:#7ec699">"./socket.io.js"</span><span style="color:#67cdcc">></span>
<span style="color:#67cdcc"><</span><span style="color:#67cdcc">/</span>script<span style="color:#67cdcc">></span>
<span style="color:#67cdcc"><</span>script<span style="color:#67cdcc">></span><span style="color:#cc99cd">var</span> socket <span style="color:#67cdcc">=</span> <span style="color:#f08d49">io</span><span style="color:#cccccc">(</span>'
  http<span style="color:#67cdcc">:</span><span style="color:#67cdcc">/</span><span style="color:#67cdcc">/</span>www<span style="color:#cccccc">.</span>domain2<span style="color:#cccccc">.</span>com<span style="color:#67cdcc">:</span><span style="color:#f08d49">8080</span>'<span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#999999">// 连接成功处理</span>
 socket<span style="color:#cccccc">.</span><span style="color:#f08d49">on</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'connect'</span><span style="color:#cccccc">,</span> <span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span> <span style="color:#cccccc">{</span>    
<span style="color:#999999">// 监听服务端消息</span>
    socket<span style="color:#cccccc">.</span><span style="color:#f08d49">on</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'message'</span><span style="color:#cccccc">,</span> <span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span>msg<span style="color:#cccccc">)</span> 
<span style="color:#cccccc">{</span>        
console<span style="color:#cccccc">.</span><span style="color:#f08d49">log</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'data from server: ---> '</span> <span style="color:#67cdcc">+</span> msg<span style="color:#cccccc">)</span><span style="color:#cccccc">;</span> 
    <span style="color:#cccccc">}</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>   
 <span style="color:#999999">// 监听服务端关闭</span>
    socket<span style="color:#cccccc">.</span><span style="color:#f08d49">on</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'disconnect'</span><span style="color:#cccccc">,</span> <span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span> <span style="color:#cccccc">{</span> 
     console<span style="color:#cccccc">.</span><span style="color:#f08d49">log</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'Server socket has closed.'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span> 
    <span style="color:#cccccc">}</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#cccccc">}</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
 document<span style="color:#cccccc">.</span><span style="color:#f08d49">getElementsByTagName</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'input'</span><span style="color:#cccccc">)</span>
 <span style="color:#cccccc">[</span><span style="color:#f08d49">0</span><span style="color:#cccccc">]</span><span style="color:#cccccc">.</span><span style="color:#f08d49">onblur</span> <span style="color:#67cdcc">=</span> <span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span> <span style="color:#cccccc">{</span>
    socket<span style="color:#cccccc">.</span><span style="color:#f08d49">send</span><span style="color:#cccccc">(</span><span style="color:#cc99cd">this</span><span style="color:#cccccc">.</span>value<span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#cccccc">}</span><span style="color:#cccccc">;</span>
 <span style="color:#67cdcc"><</span><span style="color:#67cdcc">/</span>script<span style="color:#67cdcc">></span></span></span></span></span>

2）Nodejs socket后台：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#50556b"><span style="color:#cccccc"><span style="color:#cc99cd">var</span> http <span style="color:#67cdcc">=</span> <span style="color:#f08d49">require</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'http'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#cc99cd">var</span> socket <span style="color:#67cdcc">=</span> <span style="color:#f08d49">require</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'socket.io'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#999999">// 启http服务</span>
<span style="color:#cc99cd">var</span> server <span style="color:#67cdcc">=</span> http<span style="color:#cccccc">.</span><span style="color:#f08d49">createServer</span><span style="color:#cccccc">(</span><span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span>req<span style="color:#cccccc">,</span> res<span style="color:#cccccc">)</span>
 <span style="color:#cccccc">{</span>
    res<span style="color:#cccccc">.</span><span style="color:#f08d49">writeHead</span><span style="color:#cccccc">(</span><span style="color:#f08d49">200</span><span style="color:#cccccc">,</span> <span style="color:#cccccc">{</span>        
<span style="color:#7ec699">'Content-type'</span><span style="color:#67cdcc">:</span> <span style="color:#7ec699">'text/html'</span>
    <span style="color:#cccccc">}</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
    res<span style="color:#cccccc">.</span><span style="color:#f08d49">end</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#cccccc">}</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
server<span style="color:#cccccc">.</span><span style="color:#f08d49">listen</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'8080'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
console<span style="color:#cccccc">.</span><span style="color:#f08d49">log</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'Server is running at port 8080...'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#999999">// 监听socket连接</span>
socket<span style="color:#cccccc">.</span><span style="color:#f08d49">listen</span><span style="color:#cccccc">(</span>server<span style="color:#cccccc">)</span><span style="color:#cccccc">.</span><span style="color:#f08d49">on</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'connection'</span><span style="color:#cccccc">,</span> 
   <span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span>client<span style="color:#cccccc">)</span> 
<span style="color:#cccccc">{</span>    
<span style="color:#999999">// 接收信息</span>
    client<span style="color:#cccccc">.</span><span style="color:#f08d49">on</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'message'</span><span style="color:#cccccc">,</span> <span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span>msg<span style="color:#cccccc">)</span> <span style="color:#cccccc">{</span>
    client<span style="color:#cccccc">.</span><span style="color:#f08d49">send</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'hello：'</span> <span style="color:#67cdcc">+</span> msg<span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>       
 console<span style="color:#cccccc">.</span><span style="color:#f08d49">log</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'data from client: ---> '</span> <span style="color:#67cdcc">+</span> msg<span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
    <span style="color:#cccccc">}</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>    
 <span style="color:#999999">// 断开处理</span>
    client<span style="color:#cccccc">.</span><span style="color:#f08d49">on</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'disconnect'</span><span style="color:#cccccc">,</span> <span style="color:#cc99cd">function</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span> <span style="color:#cccccc">{</span>        
 console<span style="color:#cccccc">.</span><span style="color:#f08d49">log</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'Client socket has closed.'</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span> 
    <span style="color:#cccccc">}</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span>
<span style="color:#cccccc">}</span><span style="color:#cccccc">)</span><span style="color:#cccccc">;</span></span></span></span></span>

本文分享自微信公众号 - Web项目聚集地（web_resource），作者：安静de沉淀

原文出处及转载信息见文内详细说明，如有侵权，请联系 yunjia_community@tencent.com 删除。

xxxxxxxr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨域明天入职1

一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能没有影响，但是更方便程序员使用。. 语法糖让程序更加简洁，有更高的可读性。让一个div垂直水平居中有两种情况，第一种是元素不固定宽高的，有三种方式使用绝对定位加transform偏移使用flex布局，设置align-items:center;justify-content:center; 使用grid布局，设置align-self:center; justify-self:center;如果元素有固定宽高，可以使用：绝对
复制链接

扫一扫