本文实践了三种方法去解决从a页面通过跨域ajax请求b页面的数据，三种方法分别：
- jsonp
- 服务器代理
- 在服务器端设置cors
1. 跨域 cross-domain
什么是跨域？ 顾名思义可以理解为：超越了划定的区域。
具体来说，当你在一个页面中去请求另一个页面的数据时，这个请求就可能“越界”了。
如：在A页面中的，发动ajax中去请求B页面的数据。如果A页面和B页面不是同源的，则说明这个请求是跨域的。
1.1 同源与不同源
所谓同源是指:域名，协议，端口均相同。
1.1.1 同源的：
A页面：http://www.aaa.com/index.html
B页面: http://www.aaa.com/server.php
从A页面请求B页面，不存在跨域
1.1.2 如下不是同源的：域名不同
A页面: http://www.aaa.com/index.html
B页面: http://www.bbb.com/server.php
如下不是同源的：端口号不同
A页面: http://www.aaa.com:8080/index.html 请求 B页面: http://www.aaa.com:8081/server.php
如下不是同源的：协议不同
A页面: http://www.aaa.com/index.html
请求
B页面 https://www.aaa.com/server.php
关于同源问题，可以在这里研读阮老师的博客。
跨域的错误提示
如果你的请求是跨域时，你可能会看到如下类型的错误：
注意关键字：Access-control-allow-origin
基本的代码示例
下面的代码运行需要 node 和 express 支持。
相关文件目录 如下：
port3000.js
代码如下：
//port3000.js 文件
const express = require("express");
const https = require("https");
const path = require("path");
const app = express();
app.use(express.static(path.join(__dirname, "/public")));
app.get("/",(req,res)=>{
res.sendFile(__dirname +"/3000.html"); //直接引入3000.html文件
});
app.listen(3000,()=>{
console.log("http server is listening in port 3000...")
})
上面的代码在node环境下运行之后，就会开启express服务，监听3000端口。具体的功能是：在浏览器中访问:localhost:3000时，就会直接显示3000.html的内容。
3000.html
下面的代码是一个静态的html。
Document
通过node port3000.js 可以打开这个页面。
讨论ajax跨域
我们引入jquery-1.11.0.js文件是用了使用其中的ajax方法。
创建好上面两个文件后，我们就可以在当前目录下，通过node命令去运行3000.js文件了。
类似于如下：
上面只是启动了服务，接下来还需要通过浏览器去访问这个服务：
你看到的页面就是3000.html文件。
data.json
这个json文件，用来模拟数据源。
{
"name":"jake",
"age":30
}
同源请求数据
给按钮"ajax请求3000端口"添加点击事件。
$("#btn3000").on("click",function(){
console.info("btn3000");
$.getJSON("/getData",function(d){
console.log(d)
$("#result").html(JSON.stringify(d));
})
});
注意: getJSON是$.ajax 的一个快捷写法，用来请求json数据。它的第一个参数就是要请求的地址。也就相当于localhost:3000/getData。此时，直接点击按钮肯定会报错的，因为你在express中没有设置这个路由。
所以接下来，你还需要在port3000.js中去添加一段代码：
const app = express();
app.use(express.static(path.join(__dirname, "/public")));
app.get("/",(req,res)=>{
res.sendFile(__dirname +"/3000.html"); //直接引入3000.html文件
});
app.get("/getData",(req,res)=>{
let d = require("./data.json");
res.json(d); // 直接输出json
});
app.listen(3000,()=>{
console.log("http server is listening in port 3000...")
})
上面的app.get("/getData")这段就是设置了一个路由，其响应就是直接访问data.json文件，并以json的格式输出。
由于你修改了port3000.js，所以你需要重新运行 node port3000命令。
刷新浏览器，点击按钮"ajax请求3000端口" ，你会看到类似如下效果：
好的，以上是同源的，没什么难度。下面进入正题。
跨域访问
按上面所述跨域有很多种表现，下面模拟一下“端口号不同”的跨域。
得益于express框架，我们可以快速地在本机上搭建另一个端口号的服务。创建port4000.js文件。具体代码如下：
const express = require("express");
const path = require("path");
const app = express();
app.get("/",(req,res)=>{
res.sendFile(__dirname +"/4000.html");
});
app.get("/getData",(req,res)=>{ //提供对localhost:4000/getData的响应
let d = require("./data.json");
res.json(d); // 直接输出json
});
app.listen(4000,()=>{
console.log("http server is listening in port 4000...")
})
它需要有一个4000.html(这个文件只是打酱油的)
4000.html如下：
Document
通过node port4000.js 可以打开这个页面。
ok，在当前目录下，运行node port4000.js
新开一个浏览器窗口，访问4000端口：
在此为止，我们已经在本机上通过express服务模拟了两个域，分别是"localhost:3000"和"localhost:4000"，它们分别由port3000.js和port4000.js支持。并且你可以分别通过localhost:3000/getData和localhost:4000/getData去显示data.json中的数据。
下面，我们要实现的功能是：在localhost:3000这个域中通过ajax去访问localhost:4000/getData这个接口。
在3000.html中编写代码，给"ajax请求4000端口"添加点击事件响应
$("#btn4000").on("click",function(){
console.info("btn4000");
$.ajax({
type:"GET",
url:"http://localhost:4000/getData",
dataType:"json",
success:function(d){
console.log(d)
$("#result").html(JSON.stringify(d));
}
});
})
上面的$.ajax写法等价于$.json，就是换个写法而已。
点击这个按钮，在浏览器的控制台下，你会看到如下的错误：
这就是我们说的跨域的错误。
解决方法一：jsonp
script标签可以用来引入外部的js文件，格式是：
例如：
当然，这个地址是一个网络的地址也是ok的，如
并且，它不需要遵守同源策略。这僦是核心的原理。
下面开个脑洞。
如果你在3000.html中加这一句：