【Ajax】笔记-设置CORS响应头实现跨域
CORS
CORS
CORS是什么？
CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
CORS怎么工作的？
CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。
CORS的使用
主要是服务端的设置：
roter.get("/testAJAX",function(req,res){//通过 res 来设置响应头，来允许跨域请求//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");res.set("Access-Control-Allow-Origin","*");res.send("testAJAX 返回的响应")
});
前端
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CORS</title><style>#result{width:200px;height:100px;border:solid 1px #90b;}</style>
</head>
<body><button>发送请求</button><div id="result"></div><script>const btn = document.querySelector('button');const result = document.getElementById("result");btn.onclick = function(){//1. 创建对象const x = new XMLHttpRequest();//2. 初始化设置x.open("GET", "http://127.0.0.1:8000/cors-server");//3. 发送x.send();//4. 绑定事件x.onreadystatechange = function(){if(x.readyState === 4){if(x.status >= 200 && x.status < 300){//输出响应体console.log(x.response);result.innerHTML=x.response;}}}}</script>
</body>
</html>
服务
app.all('/cors-server', (request, response)=>{//设置响应头response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Headers", '*');response.setHeader("Access-Control-Allow-Method", '*');// response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");response.send('hello CORS');
});
测试
相关文章：
【Ajax】笔记-设置CORS响应头实现跨域
CORS CORS CORS是什么？ CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。跨域资源共享标准新增了一组HTTP首…...
实现Feed流的三种模式：拉模式、推模式和推拉结合模式
在互联网产品中，Feed流是一种常见的功能，它可以帮助我们实时获取我们关注的用户的最新动态。Feed流的实现有多种模式，包括拉模式、推模式和推拉结合模式。在本文中，我们将详细介绍这三种模式，并通过Java代码示例来实现…...
Vue中使用Typescript及Typescript基础
准备工作 新建一个基于ts的vue项目 通过官方脚手架构建安装 # 1. 如果没有安装 Vue CLI 就先安装 npm install --global vue/cli最新的Vue CLI工具允许开发者 使用 TypeScript 集成环境 创建新项目。 只需运行vue create my-app 然后选择选项，箭头键选择 Manuall…...
MySQL数据库 【索引事务】
目录 一、概念 二、索引的优缺点 1、索引的优点 2、索引的缺陷 三、索引的使用 1、查看索引 2、创建索引 3、删除索引 四、索引底层的数据结构 1、B树 2、B树 五、索引事务 1、概念和回滚 2、事务的使用 3、事务的基本特性 4、并发会遇到的问题 （…...
源码阅读：classnames
源码阅读：classnames 源码阅读：classnames简介源码解读indexdedupebind类型声明 学习与收获 源码阅读：classnames 简介 classnames 一个简单的 JavaScript 实用程序，用于有条件地将类名连接在一起。 可以通过 npm 包管理器从 n…...
【解惑笔记】树莓派+OpenCV+YOLOv5目标检测(Pytorch框架)
【学习资料】 子豪兄的零基础树莓派教程https://github.com/TommyZihao/ZihaoTutorialOfRaspberryPi/blob/master/%E7%AC%AC2%E8%AE%B2%EF%BC%9A%E6%A0%91%E8%8E%93%E6%B4%BE%E6%96%B0%E6%89%8B%E6%97%A0%E7%97%9B%E5%BC%80%E6%9C%BA%E6%8C%87%E5%8D%97.md#%E7%83%A7%E5%BD%95…...
PostgreSQL中如何配置Huge page的数量
在了解如在PG中如何配置大页之前，我们先要对大页进行一定的了解，为什么要配置大页，配置大页的好处有哪些。 我们日常的操作系统中，程序不直接使用内存，而是使用虚拟内存地址来处理内存分配，避免计算的复杂…...
Mysql之binlog日志浅析
一、binlog日志简介 Binlog是MySQL数据库中的二进制日志，用于记录数据库中所有修改操作，包括增删改等操作。binlog以二进制格式保存，可以通过解析binlog文件来查看数据库的操作历史记录。binlog日志可以用于数据恢复、数据备份、数据同步等场…...
js 生成器函数
生成器函数（Generator Function）：生成器函数是一种特殊的函数，可以通过yield关键字来暂停和恢复函数的执行，从而实现惰性计算和迭代器的功能。在例子中，我们定义了一个fibonacci生成器函数，它使…...
HCIP OSPF+BGP综合实验
题目 1、该拓扑为公司网络，其中包括公司总部、公司分部以及公司骨干网，不包含运营商公网部分。 2、设备名称均使用拓扑上名称改名，并且区分大小写。 3、整张拓扑均使用私网地址进行配置。 4、整张网络中，运行OSPF协议或者BGP协议…...
牛客网Verilog刷题——VL46
牛客网Verilog刷题——VL46 题目解析答案 题目 根据题目提供的双口RAM代码和接口描述，实现同步FIFO，要求FIFO位宽和深度参数化可配置。电路的接口如下图所示。 双口RAM端口说明： 同步FIFO端口说明： 双口RAM代码如下ÿ…...
C/C++开源库推荐
C/C开源库推荐 主要都是平常用到的，包含windows开发、android开发、后台开发、音视频开发、深度学习等等最后还附带几个其他语言开发的比较好的项目 GUI开发 qt 跨平台开发库，内部封装了各种跨平台工具，但是大多数情况下都被用作开发跨平台…...
git常用命令速查表
1.git add -u [<路径>]: 把<路径>中所有跟踪（tracked）文件中被修改过或已删除文件的信息添加到索引库。它不会处理未跟踪（untracked）的文件。省略<路径>表示：即当前目录。 2.git add -a [<路径&…...
让两个文件夹里的图片名字一模一样
为了做测试集，对应数据和真值 import os import datetimeimage_names os.listdir(r\Images) #print(image_names) #print(len(image_names))mask_names os.listdir(rG:\Mask) #print(mask_names) #print(len(mask_names))#根据你提供的文件名排序结果来看,问题可…...
会议OA系统会议管理模块开发思路（layui搭建）
目录 一.为什么要进行开发 1.开发目的 2.项目流程 A.发起会议请求过程 1.首先实现我们的多选下拉框功能！ 2.时间组件功能，并且提交我们新增加的会议内容 3.在进行发起会议编码时遇到的问题，BUG 3.1.有点时候js访问不到路径 3.2在增加…...
rsync 远程同步
目录 一、Rsync 简介 二、同步方式 备份的方式 三、常用Rsync命令 四、配置源的两种表达方法 五、配置服务端与客户端的实验 启动 rsync 服务程序 发起端（192.168.158.21） 编辑 六. 发起端（客户端）配置 rsyncinotify c…...
PostgreSQL数据库中，查询时提示表不存在的解决办法
最近遇到一个奇怪的问题，以前从来没有遇到过，在postgres SCHEMA下执行select * from table1语句时，提示表不存在，而实际这个表确是存在的，只不过是在public SCHEMA下。在public SCHEMA下执行这个sql语句是没有问题的。…...
视频传输网安全防护体系
在电脑、手机信息安全保护得到广泛关注和普及的今天，监控摄像头等设备的安全防护仍为大众所忽略，大量视频监控网络的前端设备和数据没有任何保护，完全暴露在互联网中。 前端IP接入设备与后端业务系统处于直连状态，一旦有攻击者或…...
C# Blazor 学习笔记(1):Blazor基础语法，组件化和生命周期
文章目录 前言基础语法路由Page 页面元素条件生成if / elseforforeach 绑定参数绑定（赋值，单向）参数绑定（双向）事件绑定字典绑定 attributes 组件化如何使用Parameter 参数注入使用回调函数组件声明回调组件注入回调组…...
flutter 导出iOS问题2
问题1:The Swift pod FirebaseCoreInternal depends upon GoogleUtilities, which does not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries) 参考 正如上图报错第三方…...
企业信息化升级必备：OA系统的功能与优势
企业信息化升级，OA系统开启高效办公新时代在当今数字化飞速发展的时代，企业的信息化升级已成为提升竞争力的关键。而OA系统，作为企业办公自动化的核心工具，正逐渐成为企业高效办公的新标配。一、OA系统的重要性OA系统，…...
避坑指南：用OpenCompass 0.2.4评测InternLM2时，为什么MMLU数据集必须用旧版？
避坑指南：OpenCompass 0.2.4评测InternLM2时MMLU数据集版本兼容性实战解析 当你在深夜调试大模型评测代码，屏幕突然弹出"Dataset version mismatch"的红色报错时，是否也经历过那种头皮发麻的崩溃感？最近我们团队在使用O…...
如何用Awesome-Obsidian打造个性化知识管理神器：终极美化指南
如何用Awesome-Obsidian打造个性化知识管理神器：终极美化指南 【免费下载链接】awesome-obsidian 🕶️ Awesome stuff for Obsidian 项目地址: https://gitcode.com/gh_mirrors/aw/awesome-obsidian 想要将Obsidian从简单的Markdown编辑器变身为功…...
音乐版权检测新方案：CCMusic模型与MySQL数据库集成
音乐版权检测新方案：CCMusic模型与MySQL数据库集成 用AI技术解决音乐版权保护难题，让每一首作品都能得到应有的尊重 1. 引言：音乐版权保护的现实挑战 音乐创作者们经常面临这样的困境：自己的作品在各大平台被无授权使用ÿ…...
如何高效管理LiteDB数据库？LiteDB.Studio实战指南与深度解析
如何高效管理LiteDB数据库？LiteDB.Studio实战指南与深度解析 【免费下载链接】LiteDB.Studio A GUI tool for viewing and editing documents for LiteDB v5 项目地址: https://gitcode.com/gh_mirrors/li/LiteDB.Studio 在现代软件开发中，嵌入式…...
**Flutter实战进阶：用自定义RenderObject打造高性能图表组件**在Flutter开发中，我们经
Flutter实战进阶：用自定义RenderObject打造高性能图表组件 在Flutter开发中，我们经常需要展示复杂的数据可视化效果，比如折线图、柱状图等。虽然社区已有不少成熟的图表库（如charts_flutter），但它们往往无法…...
Dan Koe: 如果你有多重兴趣，请不要浪费接下来的2-3年
本文整理自 Dan Koe 原文。Dan Koe 是 YouTube、X 等平台拥有数百万粉丝的个人成长领域创作者，以"一人公司"理念、深度内容创作和高效 AI 工作流著称。你是否曾因为无法只专注一件事而感到自责？ 你学设计，又想学编程；读…...
原创分享：长图分割神器，让超长网页和聊天记录轻松打印
你是不是也遇到过这种情况？ 1、想把微信里一段长长的聊天记录打印出来留存，结果发现截图太长，打印出来字小得看不清，或者直接被裁掉一大半 2、看到一篇很好的网页文章，想打印成纸质版慢慢看，但网页截图是一…...
Krita AI Diffusion IP-Adapter功能异常深度排查与解决方案
Krita AI Diffusion IP-Adapter功能异常深度排查与解决方案 【免费下载链接】krita-ai-diffusion Streamlined interface for generating images with AI in Krita. Inpaint and outpaint with optional text prompt, no tweaking required. 项目地址: https://gitcode.com/g…...
SEO_SEO数据监控与分析的关键指标介绍
SEO数据监控与分析的关键指标介绍 在当今数字营销的世界里，SEO（搜索引擎优化）已经成为了每个网站运营者和数字营销人员必不可少的技能。SEO数据监控与分析是SEO工作的重要环节，通过对关键指标的监控和分析，我们可以更好…...