Node.js使用CORS解决跨域问题的三种方法

飞熊 • 2023年5月24日上午10:48 • 前端开发 • 阅读 320

现如今，实现跨域数据请求，最主要的两种解决方案，分别是JSONP和CORS.
JSONP:出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持GET请求，不支持POST请求。
CORS:出现的较晚，它是W3C标准，属于跨域Ajax请求的根本解决方案。支持GET和POST请求。缺点是不兼容某些低版本的浏览器。
在这里我主要介绍CORS三种解决跨域的方法。

1、通过CORS中间键解决

在命令行中输入
```
npm i cors
```
下载cors中间键

导入并调用

//导入cors包
const cors = require('cors')
//调用
app.use(cors())

2、设置响应头

Access-Control-Allow-Origin，标识允许哪个域的请求，设置*是最简单粗暴的，允许所有域的请求，不过不安全，一般只有在学习阶段使用，方便快捷。
```
res.setHeader("Access-Control-Allow-Origin", "*");
```

3、app.all解决

此方面比前面两种方法更加全面

app.all('*', function (req, res, next) {
	res.header("Access-Control-Allow-Origin", "*");
	res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
	res.header("Access-Control-Allow-Headers", "X-Requested-With");
	res.header('Access-Control-Allow-Headers', ['mytoken','Content-Type']);
	next();
});

4、解决跨域问题案例

这里主要采用第一种，其他两种方式可自行测试。

代码示例：

1.HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            width: 60px;
            height: 30px;
            background-color: aqua;
            cursor: pointer;
            border: none;
        }
    </style>
</head>
<body>
    <button class="post"></button>
    <script>
        document.querySelector('.post').addEventListener('click', () => {
            const xhr = new XMLHttpRequest()
            xhr.open("POST", " http://127.0.0.1:9000/login")
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
                    console.log(xhr.responseText)
                }
            }
            xhr.send()
        })
    </script>
</body>
</html>

2.使用express框架

// 导入express包
const express = require('express')
//导入cors包
const cors = require('cors')
// 创建应用对象
const app = express()
// 使用cors包解决跨域问题
app.use(cors())
// 设置路由规则
app.post('/login',(req,res)=>{
    res.end('登录成功')
})
// 监听端口，启动服务
app.listen(9000,()=>{
    console.log('服务已启动，监听9000端口中......');
})