实践出真知，express动手实现简单的CORS跨域
2020-08-18 本文已影响0人
苦庭
最近面试经常遇到一个问题，就是什么是跨域，当时完全没答上来，也没有多少准备。现在看来我实在是追悔莫及，原来CORS这么简单！
废话少说，咱们先来看看CORS究竟是怎么实现的吧。
- 首先，CORS的原理是：
CORS只需要向响应头header中注入Access-Control-Allow-Origin，这样浏览器检测到header中的Access-Control-Allow-Origin，则就可以跨域操作了（同源策略不生效）。
Cross-Site Resource Sharing : 跨域资源共享。
因此我们首先要分清楚，什么是跨域。
跨域即：服务端和客户端的协议、域名、端口三者不一致的情况下，我们需要绕开浏览器的同源机制去实现资源上的访问。
我们可以简单用前后端（html前端+node后端）来模拟一下操作。
- 在本地写一个html页面
<html>
<body>
<div class="title"></div>
</body>
<script>
async function fetchData() {
// Fetch 请求
let url = 'https://LightpinkObviousScientist--five-nine.repl.co' //这里需要根据repl分配到的url去自行更改，看第3点
let options = {
method: 'GET',
mode: 'cors',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;chartset=UTF-8'
}
// 因为是get请求，所以不用带body参数
};
let response = await fetch(url, options);
let responseOK = response && response.ok;
if(responseOK) {
let data = await response.json();
console.log(data);
document.getElementsByClassName('title')[0].innerHTML = JSON.stringify(data);
}
}
fetchData(); //直接调用异步方法
</script>
</html>
前端不用做太多工作（因为浏览器会帮我们自动添加了origin字头标识请求的来源），主要关键是在后端。
- 其次我们做的工作的关键是：实现一个后端。
为了实现跨域，我们不可能使用localhost来作为服务器所在的地址（不然就都在同一个域名了，跨啥跨呢，家里呆着好好交流吧）。并且，fetch方法只能对http/https的url进行操作。
因此我用了https://repl.it/languages/express这里的线上express平台来运行服务器。在index.js中输入以下代码点运行就可以了。
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors'); //引入cors库
const app = express();
// 因为cors是中间件，因此我们要先调用app.use装载中间件，以便后面我们的请求都能够经过cors到达不同的路由
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.get('/', (req, res) => {
res.json({msg: 'This is CORS-enabled for all origins!'}) //这里就是返回给客户端的json啦
});
app.listen(3000, () => console.log('server started'));
-
最后，我们前端的页面就能够成功显示啦！
image.png
可以看到，服务端返回的消息有'Access-Control-Allow-Origin:*'这一行，代表服务端允许所有网站的跨域访问。
image.png
