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

最新推荐文章于 2024-05-23 10:39:28 发布

d_ph

最新推荐文章于 2024-05-23 10:39:28 发布

阅读量2.9k

点赞数 2

文章标签： Node.js CORS 跨域 CORS跨域

本文链接：https://blog.csdn.net/qq_36996271/article/details/89762667

版权

利用CORS解决跨域的问题

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

解决方法：

服务端设置响应头

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

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

模拟前端

页面代码——index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CORS跨域</title>
</head>
<body>
	<div class="">我在8080端口，请求8081端口的数据</div>
</body>
	<script type="text/javascript">
		let xhr=new XMLHttpRequest()
		xhr.open('get','http://localhost:8081');
		xhr.send();
	</script>
</html>

将这个页面发布到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解决了跨域的问题。

d_ph

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
利用CORS解决跨域问题（Node.js代码示例）

利用CORS解决跨域的问题我们在做前后端分离项目的时候，前后端服务会放在不同的端口中，而前端想要获取后端的数据的话，就会存在跨域的问题。解决方法：服务端设置响应头 //比如你的前端服务在8080端口,那么就设置成'Access-Control-Allow-Origin': 'http://localhost:8080'//这样设置的意思是，允许8080的端口的服务来访问这个服务器的内容...
复制链接

扫一扫