目录
- 1、通过CORS中间键解决
- 2、设置响应头
- 3、app.all解决
- 4、解决跨域问题案例
现如今，实现
跨域数据请求，最主要的两种解决方案，分别是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端口中......');
})
