解决ajax 同源政策请求限制的三种方法

1.解决ajax请求限制

我们知道同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。但有时候我们需要向非同源的服务器请求和响应数据，所有就需要解决ajax请求的限制。解决的方法有三种：Jsonp、CORS（跨域资源共享）、在服务器端绕过同源政策限制。以下默认服务器端口为80，非同源服务器端口为3000。

2.方法一：Jsonp

该方法将不同源的服务器端请求地址写在script标签的src属性中，在全局函数中对服务器中返回的数据进行处理。详解见另一篇博客：Jsonp函数封装

3.方法二：CORS（跨域资源共享）

CORS：全称 Cross-origin resource sharing（跨域资源共享），它允许浏览器向跨域服务器发送 Ajax 请求，克服了 Ajax 只能同源使用的限制。

其使用方法十分的简单：在被请求的服务器中使用express框架的中间件进行相应的请求拦截从而进行响应头的配置（相当于将客户端添加到服务器可访问的白名单）。
具体使用如下：

//拦截所有请求  3000端口服务器
server.use((req, res, next) => {
	// Access-Control-Allow-Origin 允许哪些客户端访问我
	// * 代表允许所有的客户端访问我
	server.header('Access-Control-Allow-Origin', '*');
	// Access-Control-Allow-Methods 允许客户端使用哪些请求方法访问我
	server.header('Access-Control-Allow-Methods', 'get,post');
	next(); // 将控制权传递给下一中间件
});

在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息，如需要连cookie信息一起传递到另一服务器则需要在客户端和服务器端进行以下配置：

// 客户端
// 对ajax对象进行设置 当发送跨域请求时，携带cookie信息
xhr.withCredentials = true;

// 服务器端   3000端口服务器
// 在响应头中进行设置 允许客户端发送跨域请求时携带cookie信息
res.header('Access-Control-Allow-Credentials', true);

4.方法三：服务器端绕过同源政策

该方法需要使用到node的第三方模块 request ，使用npm install request命令进行模块的安装。
服务器端代码如下：

// 80端口服务器
// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 向其他服务器端请求数据的模块
const request = require('request');
// 创建web服务器
const server = express();
// 开放静态资源访问服务功能
server.use(express.static(path.join(__dirname, 'public')));

server.get('/server', (req, res) => {
	request('http://localhost:3000/test', (err, response, body) => {
		// body 为另一服务器的响应内容
		res.send(body);
	})
});
// 监听端口
server.listen(80);