跨域解决方案（前端请求相关知识）

手写简易的ajax请求

function ajax (type,url,data = null) {
	const xhr = new XMLHttpRequest()
	
	xhr.open(type, url, false)
	if(type === 'get') {
		xhr.send()
	}else if(type === 'post') {
		xhr.send(JSON.stringify(data))
	}
	xhr.onload = function() {
		if(xhr.status == 200) {
			console.log('请求成功')
		}else {
			console.log('请求失败')
		}
	}
}
ajax('post', '/addUser', {
	name: 'Curry',
	age: 27
})
ajax('get', '/UserList?id=2')

看大家如何理解简易，这是我的简易版

解决跨域方法

封装jsonp

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

缺点：jsonp不支持post请求

跨域资源共享（CORS），只需服务端设置，前端不用做任何配置

node为例

app.use((req, res, next) => {
	res.header('Access-Control-Allow-Origin', '*');
	res.header('Access-Control-Allow-Methods', 'GET, POST');
	//允许客户端发送请求时携带cookie
	res.header('Access-Control-Allow-Credential', 'true')
	next();
})

注意：涉及跨域请求时，浏览器默认不会携带cookie信息，需要设置
原生ajax时：xhr.withCredentials = true

代理

nginx代理

location /api/ {
	#允许跨域的域名
	add_header Access-Control-Allow-Origin www.aly01.com;
	#允许跨域请求的方法
	add_header Access-Control-Allow-Methods GET, POST, PUT, DELETE;
	#允许客户端发送请求时携带cookie
	add_header Access-Control-Allow-Credentials: true;
	#反向代理
	proxy_pass   http://www.aly02.com:8080/;  
	#修改cookie里域名
    proxy_cookie_domain www.domain2.com www.aly01.com; 
}

注意如果要替换掉api，proxy_pass 地址后面需要加/如果不加请求的地址后面会带上api
还可以通过node做代理后面会加上，如大家急需了解，可以在评论区说，我尽快更新…