跨域解决方案

举例URL： https://www.stuspy.com/mxsj/paperTest.html?id=5a56d694ac502e0042d73dce

名称	说明
协议	https:
分隔符	//
域名	www.stuspy.com
端口	跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符。端口不是一 个URL必须的部分，如果省略端口部分，将采用默认端口
文件名	从域名后的最后一个“/”开始到“？”为止，是文件名部分，如果没有“?”,则是从 域名后的最后一个“/”开始到“#”为止，是文件部分，如果没有“？”和“#”，那么 从域名后的最后一个“/”开始到结束都是文件名部分。本例中的文件名 是“paperTest.html”。文件名部分也不是一个URL必须的部分，如果省略该部分， 则使用默认的文件名
锚	从“#”开始到最后，都是锚部分。锚部分也不是一个URL必须的部分
虚拟目录	从域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分。虚拟目录 也不是一个URL必须的部分，本例的虚拟目录为“/mxsj/”
参数	从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。参数 可以允许有多个参数，参数与参数之间用“&”作为分隔符。本例中的参数部分 为“id=5a56d694ac502e0042d73dce”

概念：只要协议、域名、端口有任何一个不同，都被当作是不同的域。

跨域的几种情况

• 协议不同
• 域名相同，端口不同
• 域名与域名对应ip
• 域名不同
• 主域相同，子域不同
• 同一域名，不同二级域名

跨域解决方案

1.CORS(主要解决的是异域之间的传值)

跨源资源共享定义了在必须访问跨源资源时，浏览器与服务器该如何沟通。其背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是否应该成功。

• 对于客户端，我们还是正常使用xhr对象发送ajax请求。
• 对于服务器端，需要在 response header中设置Access-Control-Allow-Origin字段。
  IE8 通过 XDomainRequest 对象支持CORS，其他浏览器通过 XHR 对象原生支持 CORS。

2.图像Ping

图像Ping——最常用于跟踪用户点击页面或动态广告曝光次数。有两个主要的缺点，一是只能发送GET请求，二是无法访问服务器的响应文本。因此，图像Ping只能用于浏览器与服务器间的单向通信。

3.JSONP

JSONP（JSON with padding的简写）——是一种基于文本的数据交换方式，或者叫做数据描述格式。jsonp通过动态

// 消息接收方
// 注册message事件并绑定事件监听函数
if (window.addEventListener) { 
  window.addEventListener('message', receiveMessage, false);
 } else {
   window.attachEvent('message', receiveMessage);
}
function receiveMessage(event) {
  // For Chrome, the origin property is in the event.originalEvent
  var origin = event.origin || event.originalEvent.origin; 

  // 使用origin或source属性验证发件人的身份
  if (origin !== "http://localhost:2000") { // http://localhost:2000为自己定义的地址
    return;
  }

  // Do Something ...
  var data = event.data;
  console.log(data)
}

该跨域方法适合于同一页面的不同窗体(iframe)

5.document.domain(主要解决的是子域与父域之间的传值)

• 定义：domain 属性可返回下载当前文档的服务器域名。
• 局限性: 一级域名一致才可以使用document.domain进行跨域访问
  • 注：一级域名又称顶级域名。一级域名中只含有一个“.”，且“.”左边要有内容，最后一个点的右边被称为一级域名，左边被称为二级域名，以此类推二级三级域名。

现有父域：http://b.com/b.com.html
要向子域：http://a.b.com/a.b.com.html获取数据
两个域都设置如下：

 document.domain = 'b.com'; //设置成主域

这样就解决了子域与父域间的跨域问题

6. 后端设置代理proxy跨域

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

var requestPort = 2000; 
var app = express();

app.use(express.static(__dirname));

app.use('/api', proxy({target: 'http://localhost:2001/', changeOrigin: true}));
// changeOrigin设置为true，本地会虚拟一个服务端接收你的请求并代你发送该请求
// http://localhost:2000/api   -->   http://localhost:2001/api

app.listen(requestPort, function () {
    console.log('Requester is listening on port '+ requestPort);
});

7.WebSocket跨域

Web Sockets 是一种与服务器进行全双工、双向通信的信道。与其他方案不同，Web Sockets 不使用HTTP 协议，而使用一种自定义的协议——WebSocket 通信