http头部字段Origin和Access-Control-Allow-Origin解决请求跨域
更新时间：2023年06月25日 14:36:18 作者：一颗冰淇淋
这篇文章主要为大家介绍了http头部字段Origin和Access-Control-Allow-Origin解决请求跨域示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
Http协议中请求头和响应头
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~
8080端口起的服务
客户端新建 html 页面，发送 get 请求向本地的 8080 端口
<script>
const url = 'http://127.0.0.1:8000'
fetch(url).then(res=>{
console.log('请求结果',res)
})
</script>再通过5500端口打开页面，会发现请求发送失败，控制台报错【被跨域策略阻止了】
跨域
通过查看请求信息可以发现，请求头部字段 Origin 标识着当前请求url
请求头origin
同域下才可以发送异步请求，是浏览器的保护策略，在响应头告知浏览器哪些来源允许跨域，则可以不受浏览器的限制。
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的状态码
响应成功
以上就是http头部字段Origin和Access-Control-Allow-Origin解决请求跨域的详细内容，更多关于http解决请求跨域的资料请关注脚本之家其它相关文章！
相关文章
javascript合法验证 js数据验证、js email验证、js url验证、js长度验证、js数字验证等(弹出对话框形式)2009-06-06
这篇文章主要介绍了Bootstrap v4 sass设计的相关资料,需要的朋友可以参考下2016-05-05
本节主要介绍了js键盘事件的keyCode，在你按下键时会弹出它的键码,需要的朋友可以参考下2014-07-07
判断一个控件是否已加载完成其实很简单，就是利用浏览器的解析顺序。通俗的说，代码的位置越靠前，就越先加载。2010-02-02
js的with语句使用方法...2007-09-09
这篇文章主要介绍了JS实现图片懒加载(lazyload)过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-04-04
在Javascript中由于没有作用域的概念，所以很容易发生标识符名称的冲突，尤其是在比较大的项目中，这类情况更容易发生2010-04-04
这篇文章主要为大家介绍了Javascript 虚拟 DOM，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
TDesign是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系,下面这篇文章主要给大家介绍了关于前端的框架TDesign小程序组件库体验的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-11-11
下面小编就为大家带来一篇javaScript之split与join的区别(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最新评论