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

在前后端分离项目中,前后端服务端口不同,前端获取后端数据会存在跨域问题。本文用Node.js代码模拟前后端情况,通过在服务器(8081端口)设置Header,允许8080端口请求访问,最终成功解决跨域问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

利用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解决了跨域的问题。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值