跨域的几种方案以及实现（JSONP，CORS，服务器端跨域）

同源政策：如果两个页面拥有相同的协议、域名和端口则同源，如果其中有一个不一样就是不同源。
同源政策是为了保证用户信息安全，防止恶意的网站窃取数据，在同源政策下无法向非同源地址发送Ajax请求。

跨域： 为了解决同源限制问题，主要有JSONP、CORS和服务器端跨域几种方法

• JSONP （json with padding）：不属于Ajax请求，但可以模拟Ajax请求。实现要点如下：

1. 将非同源服务器端的请求地址写在script标签的src属性中

   <script src="http://localhost:3001/test"></script>

2. 服务器端响应数据必须是一个函数的调用，要发送给客户端的数据需要作为函数调用的参数

const data = 'fn({name: 'lisi', age: 20})'

3. 在客户端全局作用下定义函数fn

function fn (data) {
}

4. 在fn函数内部对服务器端返回的数据进行处理

function fn (data) {
	console.log('客户端的fn函数被调用了')
	console.log(data);
}

jsonp封装函数

function jsonp(options){
    //动态创建script标签
    var script = document.createElement('script') 
    //需要传递的参数拼接
    var params = ''
    for(var item in options.data){
        params += '&'+ item + '=' + options.data[item] 
    }
    //注册全局函数，使得调用jsonp时不用在外部定义函数；保证每次请求函数名的唯一性
    var fnName = 'Jsonp0fn' + Math.random().toString.replace('.','')
    window[fnName] = options.success
    //为script标签添加带函数名的src属性
    script.src = options.url +'?callback=' + fnName + params
    // 将创建好的script标签添加到页面中
    document.body.appendChild(script)
    // 加载完成后删除该script标签
    script.onload = function(){
        document.body.removeChild(script)
    }

}

jsonp({
    data: {'name':'zhangsan','age':'19' },
    url: 'http://localhost:3001/better',
    success: function (res) {
        console.log('请求成功');
        console.log(res);
    }
})

• CORS （cross-origin resource sharing）：跨域资源共享，它允许浏览器向跨域服务器发送Ajax请求。

1. 在服务器端的响应头中设置'Access-Control-Allow-Origin'指定可以访问自身的客户端地址
2. 在服务器端的响应头中设置'Access-Control-Allow-Methods'指定可以进行访问的方法

app.get('/cross', (req, res) => {
	res.send('ok')
});

// 拦截所有请求
app.use((req, res, next) => {
	// 1.允许哪些客户端访问我
	// * 代表允许所有的客户端访问我
	// 注意：如果跨域请求中涉及到cookie信息传递，值不可以为*号 比如是具体的域名信息
	res.header('Access-Control-Allow-Origin', 'http://localhost:3000')
	// 2.允许客户端使用哪些请求方法访问我
	res.header('Access-Control-Allow-Methods', 'get,post')
	// 允许客户端发送跨域请求时携带cookie信息
	res.header('Access-Control-Allow-Credentials', true);
	next();
});

3. 客户端正常发送Ajax请求

ajax({
	type: 'get',
	url: 'http://localhost:3001/cross',
	success: function (data) {
		console.log(data)
	}
})

• 服务器端跨域：同源政策是浏览器给Ajax技术的限制，服务器端不存在同源政策限制。所以我们可以让A服务器端访问B服务器端，再将访问到的数据响应给A客户端，从而实现A客户端访问B服务器端数据的目的。

1. 在A服务器端通过第三方模块request向B服务器端发送请求

// 引入向其他服务器端请求数据的模块
const request = require('request');
app.get('/server', (req, res) => {
	//向B服务器发起请求
	request('http://localhost:3001/cross', (err, response, body) => {
		res.send(body);
	})
});

2. 在A客户端中通过Ajax访问A服务器中响应到的B服务器端的数据

ajax({
	type: 'get',
	url: 'http://localhost:3000/server',
	success: function (data) {
		console.log(data);
	}
})