在近期的面试中,面试官针对我的项目,问到了 如何解决跨域? 没答好,我想通过这篇文章,巩固一下这方面的知识,分享一下我对于这个问题的理解,希望也能对大家有所帮助。
我的回答
跨域我们需要从浏览器聊起,我们知道浏览器有一个同源策略,协议号-域名-端口号都相同才能叫同源,它的目的是确保数据安全。如果不是同源,那么后端返回给浏览器的数据被浏览器拦截下来,这就是跨域。
解决跨域的方式有很多种,在项目中我是通过 Cors 解决的。Cors 应该是目前比较常用的方式之一,它的原理是通过在响应头中添加一些额外的字段,如 Access-Control-Allow-Origin 字段,添加允许跨域的源,类似于设置白名单之类的操作。
还有一些其他的解决办法:
Jsonp 主要是借助了
点击获取数据,控制台会报错,提示跨域。
Cors
跨源资源共享(CORS,或通俗地译为跨域资源共享)是一种基于 HTTP 头的机制,该机制通过允许服务器标示除了它自己以外的其他源(域、协议或端口),使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求,该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中,浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。
实现
在后端响应头添加access-control-allow-origin字段提示允许这些源跨域。
js 代码解读复制代码const http = require('http');
const server = http.createServer((req, res) => {
res.writeHead(200,{
// 'access-control-allow-origin':'*'//允许所有源
'access-control-allow-origin':'http://127.0.0.1:5501'//自己的前端
})
let data ={
msg:'Hello world'
}
res.end(JSON.stringify(data));