跨域问题

1、什么跨域？

跨域指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

同源策略：是指协议、域名、端口都要相同，只要三者有一个不同就会产生跨域。
例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名有不同，所进行的访问行为都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，事实上是浏览器的限制策略，理解这一点很重要。

2、三种方式解决跨域问题

JSONP（需前后端配合来完成）
前端使用script标签来调用接口。
后端需要配合使用res.jsonp()返回数据。
JSONP只适用于GET请求，POST请求用不了。

// 第一种写法

<script>
	function handleData(res) {console.log('res', res)}
</script>
<script src="http://localhost:8001/user/list?callback=handleData"></script>

// 第二种写法

<script>
	function handleData(res) {console.log('res', res)}

	var oScript = document.createElement('script')
	oScript.src = "http://localhost:8001/user/list?callback=handleData"
	oScript.type = "text/javascript"
	document.body.appendChild(oScript)
</script>
	代理：使用http-proxy-middleware中间件来实现代理
	在Node.js中使用http-proxy-middleware来进行接口代理
	后端还可以使用Nginx进行接口代理
	前端可以使用Webpack进行接口代理
	const app = require('express')()
	const {createProxyMiddleware} = require('http-proxy-middleware')
	
	app.use('/api', createProxyMiddleware({
		target: 'http://10.36.136.170:9999',
		changeOrigin: true
	}))

CORS

	只需要后端工程师来处理
	const app = require('express')()
	//设置跨域访问（前端需要清除缓存后，才能再测试跨域）
	app.all('*', function(req, res, next) {
	    res.header("Access-Control-Allow-Origin", "*");
	    res.header("Access-Control-Allow-Headers", "X-Requested-With");
	    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
	    res.header("X-Powered-By",' 3.2.1')
	    res.header("Content-Type", "application/json;charset=utf-8");
	    next();
	});