Ajax跨域问题三种解决方案

Ajax同源政策

Ajax请求限制

Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求，但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B 网站也不能向 A 网站发送 Ajax请求。

什么是同源

如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。
http://www.example.com/dir/page.html

http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）
https://www.example.com/dir/page.html：不同源（协议不同）

同源政策的目的

同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指 A 网站在客户端设置的 Cookie，B网站是不能访问的。
随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax 请求，如果请求，浏览器就会报错。

方法一：使用 JSONP 解决同源限制问题

对jsonp进行封装

function jsonp (options) {
	// 创建script标签
	var script = document.createElement('script');
	// 生成随机函数名
	var fnName = 'jsonp' + Math.random().toString().replace('.', '') + new Date().getTime();
	// 为全局作用域下添加一个属性 属性的名字就是我们随机生成的函数名
	// 让属性的值指向调用jsonp函数时传递的success
	window[fnName] = options.success;
	// 参数
	var params = '';
	// 循环用户传递的参数
	for (var attr in options.data) {
		params += '&' + attr + '=' + options.data[attr]
	}
	// 为script标签设置src属性
	script.src = options.url + '?callback=' + fnName + params;
	// 将html标签追加到页面中
	document.body.appendChild(script);
	// 当script标签加载完成之后
	script.onload = function () {
		// 将script标签从页面中删除
		document.body.removeChild(this);
	}
}

方法二：CORS 跨域资源共享

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

Node 服务器端设置响应头示例代码：

//一般都写在所有路由之前
 app.use((req, res, next) => {
     res.header('Access-Control-Allow-Origin', '*');//* 代表所有客户端都可以访问我
     res.header('Access-Control-Allow-Methods', 'GET, POST');
     next();
 })

方法三：利用服务器端不受同源限制

withCredentials属性

在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息。
如果需要携带cookie，必须给客户端和服务端写入下面代码：

//写在客户端
withCredentials：true; 指定在涉及到跨域请求时，是否携带cookie信息，默认值为false

//写在服务端
Access-Control-Allow-Credentials：true; 允许客户端发送请求时携带cookie