什么是 CORS
Cross origin resource sharing，跨域资源共享，主要出现在两种情况下：
前后端分离的开发模式下（separation of front and back stage），前后端服务运行在不同的 domain，前端请求后端数据属于 CORS
前端请求第三方不同 domain 的数据资源
CORS 分类
默认情况下的跨域请求过程主要分为两类：第一类是安全请求，浏览器直接发送实际请求；第二类是非安全请求，浏览器需要先发送预检请求 preflight，在根据 preflight response 决定是否发送实际请求。
附带凭据的跨域请求更加严格，因为它携带了 cookies 或者 HTTP 认证（HTTP authentication）等敏感数据
每种请求的场景和具体过程可参考以下资源
https://zh.javascript.info/fetch-crossorigin#ping-ju-credentials
https://www.bilibili.com/video/BV1T5411v7to/?spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=d72819370cfa974d3b9e47dee41c7878
https://www.bilibili.com/video/BV1rL411a7UN?p=6&vd_source=d72819370cfa974d3b9e47dee41c7878
实现
前端 http://localhost:5173/
后端 http://localhost:3000/
1
2
3
4
5
6
7
8
9
10
11
| import express from 'express';
const app = express();
const port = 3000;
app.get('/api/json', (req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.json({ name: 'mameiyu' });
});
app.listen(port, () => {
console.log('server is running');
});
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>跨域的四种解决办法</title>
</head>
<body>
<script>
fetch('http://localhost:3000/api/json')
.then((res) => res.json())
.then((data) => {
console.log(data);
});
</script>
</body>
</html>
|