http头部字段Origin和Access-Control-Allow-Origin解决请求跨域
http头部字段Origin和Access-Control-Allow-Origin解决请求跨域
Http协议中请求头和响应头携带了很多信息,其中 请求头 Origin,响应头 Access-Control-Allow-Origin 与跨域有关。
为了验证跨域,要将客户端和服务端分配在不同端口,这里通过 nodejs 在8080端口起一个服务,用于响应客户端的请求
const http = require('http');
const server = http.createServer((req,res)=>{
res.end('hello 8000~')
});
server.listen(8000,()=>{
console.log('监听8000端口')
})
如果通过浏览器url上直接输入地址访问,响应 hello 8080~
客户端新建 html 页面,发送 get 请求向本地的 8080 端口
<script>
const url = 'http://127.0.0.1:8000'
fetch(url).then(res=>{
console.log('请求结果',res)
})
</script>
再通过5500端口打开页面,会发现请求发送失败,控制台报错【被跨域策略阻止了】
通过查看请求信息可以发现,请求头部字段 Origin 标识着当前请求url
同域下才可以发送异步请求,是浏览器的保护策略,在响应头告知浏览器哪些来源允许跨域,则可以不受浏览器的限制。
const server = http.createServer((req,res)=>{
res.setHeader("Access-control-allow-origin","http://127.0.0.1:5500")
res.end('hello 8000~')
});
再次发送get请求,就可以响应头上增加了Access-control-allow-origin属性,并且请求成功,返回200的状态码
漫思
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?
2021-09-12 如何快速删除node_modules文件夹(windows+linux)
2021-09-12 ES6 装饰器
2021-09-12 装饰器
2021-09-12 vue-property-decorator用法介绍
2021-09-12 软件世界的基石:重要开源项目盘点
2021-09-12 ECMAScript 6 入门
2019-09-12 大屏的前提代码