摘要：前言由于自己平时只做做，并没有遇到太多跨域问题，今天通过几个样例模拟实现了几种跨域方式。
前言
由于自己平时只做做demo，并没有遇到太多跨域问题，今天通过几个样例模拟实现了几种跨域方式。原文地址 传送门
本文所有样例静态服务器基于nodejs实现，代码亲测可用。测试步骤如下：
1.为了实现跨域访问的效果，需要下载http-server 作为一个服务器 npm install http-server。用来挂载静态页面 index.html 。（访问http://127.0.0.1:8080 显示index.html页面）
2.运行node创建的静态服务器node server (node搭建静态服务向下翻)
说道跨域可能最先想到就时 jsonp ,实现原理为：同源策略只限制浏览器的行为而不限制js，所以可以将请求写到 script 标签中。关键代码如下：
前端发出跨域请求数据后，服务端去解析该请求：
const data={...}
const callback = req.parse(req.url,true).query.callback
res.writeHead(200)
//最关键的一步，拼接回调函数和作为函数参数的数据data
res.end(`${callback}(${JSON.stringfy(data)})`)
浏览器接收到服务端返回的响应，由于发起请求的是script，相当于直接调用方法并传入参数
具体实现案例（服务端代码，node.js）
const url = require("url");
require("http").createServer((req, res) => {
const data = {
x: 10
};
const callback = url.parse(req.url, true).query.callback
res.writeHead(200);
//回调原页面上函数处理返回结果
res.end(`${callback}(${JSON.stringify(data)})`);
}).listen(3000, "127.0.0.1");
console.log("服务器已启动...");
（前端）
JSONP解决Ajax跨域问题
如果是采用js原生，可以参考传送门
CORS跨域实现CORS跨域的思想为：CORS通信和Ajax同源请求没有区别，关键在于服务端的配置。要想实现CORS通信，服务端必须要设置一个自定义头Access-Control-Origin:""来允许跨域访问
（样例仅做了一个最简单的GET请求demo服务端代码）
require("http").createServer((req,res)=>{
res.writeHead(200,{
"Access-Control-Allow-Origin":"http://127.0.0.1:8080"
})
res.end("这是来自端口3000的信息，收好了~")
}).listen(3000,"127.0.0.1")
（前端代码）
cors实现跨域的优点是不但能实现 GET , POST 等简单请求，还能实现 PUT 等非简单请求跨域
ServerProxy服务器代理ServerProxy服务器代理实现跨域的核心思想是：将跨域请求操作发送给服务端，由服务端代为请求，然后将请求结返回过来
这里以获取 CNode：Node.js专业中文社区 论坛上一些数据为场景。如通过 https://cnodejs.org/api/v1/to...，当时因为不同域，所以你可以将请求后端，让其对该请求代为转发。
const url = require("url")
const http = require("http")
const https = require("https")
const server = http.createServer((req,res)=>{
const path = url.parse(req.url).path.slice(1)
if(path==="topics"){
https.get("https://cnodejs.org/api/v1/topics", (resp) => {
let data=""
resp.on("data",chunk=>{
data+=chunk
})
resp.on("end",()=>{
res.writeHead(200,{
"Content-Type":"application/json;charset=utf-8"
})
res.end(data)
})
})
}
}).listen(3000,"127.0.0.1")
console.log("服务器已启动...");
postMessage
postMessage是HTML5新增的一项功能,postMessage() 方法允许来自不同源的脚本采用异步方式进行有限通信可以实现跨文本文档，多窗口，跨域消息传递。
利用postMessage不能和服务端交换数据，只能在两个窗口