利用CORS解决跨域问题（Node.js代码示例）

利用CORS解决跨域的问题

我们在做前后端分离项目的时候，前后端服务会放在不同的端口中，而前端想要获取后端的数据的话，就会存在跨域的问题。

解决方法：

服务端设置响应头

 //比如你的前端服务在8080端口,那么就设置成
'Access-Control-Allow-Origin': 'http://localhost:8080'
//这样设置的意思是，允许8080的端口的服务来访问这个服务器的内容。
//相当于白名单

---

我们用Node.js的代码来模拟这种情况

模拟前端

页面代码——index.html

	
	


	
我在8080端口，请求8081端口的数据

	

将这个页面发布到8080端口——server1.js

let http = require('http');
let fs = require('fs')
let server = http.createServer((req, res) => {
	console.log("客户端已开启--8080端口")
	// 读取HTML文件
	let html = fs.readFileSync('./index.html', 'utf8')
	res.writeHead(200, {
		'Content-Type': 'text/html'
	})
	// 将读取到的HTML文件写入到响应流中
	res.end(html)
}).listen(8080)

模拟后端

let http = require('http');
let server = http.createServer((req, res) => {
	console.log("服务端已开启--8081端口")
	res.end('这是8081端口返回的数据')

}).listen(8081)

开启前后端的服务

进入到这两个文件的路径，通过命令行开启

node server1.js //前端开在8080端口
node server2.js //后端开在8081端口

此时我们打开8080端口，打开控制台，汇报下图的错误：

解决方法

在服务器（8081端口）设置Header，允许从8080端口来的请求访问服务器的内容（尝试用白名单的思想来理解）

将server2.js改成以下的样子

let http = require('http');

let server = http.createServer((req, res) => {
	console.log("服务端已开启--8081端口")
	res.writeHead(200, {
		'Content-Type': 'text/plain;charset=utf-8',//不加这个会返回乱码，因为下面返回的数据是中文
		'Access-Control-Allow-Origin': 'http://localhost:8080'
	})
	res.end('这是8081端口返回的数据')

}).listen(8081)

重启服务，刷新页面。
我们打开浏览器的Network选项，可以看到请求成功，并且也有数据返回了。

点开Preview 选项卡，可以看到返回的数据

至此，利用CORS解决了跨域的问题。