当前位置： 首页 > news >正文

【Ajax】笔记-设置CORS响应头实现跨域

news 2026/5/17 6:43:05

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是什么&#xff1f; CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS是官方的跨域解决方案&#xff0c;它的特点是不需要在客户端做任何特殊的操作&#xff0c;完全在服务器中进行处理&#xff0c;支持get和post请求。跨域资源共享标准新增了一组HTTP首…...

编程日记 2023/8/1 12:06:04

实现Feed流的三种模式：拉模式、推模式和推拉结合模式

在互联网产品中&#xff0c;Feed流是一种常见的功能&#xff0c;它可以帮助我们实时获取我们关注的用户的最新动态。Feed流的实现有多种模式&#xff0c;包括拉模式、推模式和推拉结合模式。在本文中&#xff0c;我们将详细介绍这三种模式&#xff0c;并通过Java代码示例来实现…...

编程日记 2023/8/1 12:05:03

Vue中使用Typescript及Typescript基础

准备工作 新建一个基于ts的vue项目 通过官方脚手架构建安装 # 1. 如果没有安装 Vue CLI 就先安装 npm install --global vue/cli最新的Vue CLI工具允许开发者 使用 TypeScript 集成环境 创建新项目。 只需运行vue create my-app 然后选择选项&#xff0c;箭头键选择 Manuall…...

编程日记 2023/8/1 12:03:59

MySQL数据库 【索引事务】

目录 一、概念 二、索引的优缺点 1、索引的优点 2、索引的缺陷 三、索引的使用 1、查看索引 2、创建索引 3、删除索引 四、索引底层的数据结构 1、B树 2、B树 五、索引事务 1、概念和回滚 2、事务的使用 3、事务的基本特性 4、并发会遇到的问题 &#xff08…...

编程日记 2023/8/1 12:02:58

源码阅读：classnames

源码阅读&#xff1a;classnames 源码阅读&#xff1a;classnames简介源码解读indexdedupebind类型声明 学习与收获 源码阅读&#xff1a;classnames 简介 classnames 一个简单的 JavaScript 实用程序&#xff0c;用于有条件地将类名连接在一起。 可以通过 npm 包管理器从 n…...

编程日记 2023/8/1 12:01:57

【解惑笔记】树莓派+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…...

编程日记 2023/8/1 12:00:56

PostgreSQL中如何配置Huge page的数量

在了解如在PG中如何配置大页之前&#xff0c;我们先要对大页进行一定的了解&#xff0c;为什么要配置大页&#xff0c;配置大页的好处有哪些。 我们日常的操作系统中&#xff0c;程序不直接使用内存&#xff0c;而是使用虚拟内存地址来处理内存分配&#xff0c;避免计算的复杂…...

编程日记 2023/8/1 11:59:55

Mysql之binlog日志浅析

一、binlog日志简介 Binlog是MySQL数据库中的二进制日志&#xff0c;用于记录数据库中所有修改操作&#xff0c;包括增删改等操作。binlog以二进制格式保存&#xff0c;可以通过解析binlog文件来查看数据库的操作历史记录。binlog日志可以用于数据恢复、数据备份、数据同步等场…...

编程日记 2023/8/1 11:58:54

js 生成器函数

生成器函数&#xff08;Generator Function&#xff09;&#xff1a;生成器函数是一种特殊的函数&#xff0c;可以通过yield关键字来暂停和恢复函数的执行&#xff0c;从而实现惰性计算和迭代器的功能。在例子中&#xff0c;我们定义了一个fibonacci生成器函数&#xff0c;它使…...

编程日记 2023/8/1 11:57:53

HCIP OSPF+BGP综合实验

题目 1、该拓扑为公司网络&#xff0c;其中包括公司总部、公司分部以及公司骨干网&#xff0c;不包含运营商公网部分。 2、设备名称均使用拓扑上名称改名&#xff0c;并且区分大小写。 3、整张拓扑均使用私网地址进行配置。 4、整张网络中&#xff0c;运行OSPF协议或者BGP协议…...

编程日记 2023/8/1 11:56:52

牛客网Verilog刷题——VL46

牛客网Verilog刷题——VL46 题目解析答案 题目 根据题目提供的双口RAM代码和接口描述&#xff0c;实现同步FIFO&#xff0c;要求FIFO位宽和深度参数化可配置。电路的接口如下图所示。   双口RAM端口说明&#xff1a; 同步FIFO端口说明&#xff1a; 双口RAM代码如下&#xff…...

编程日记 2023/8/1 11:55:51

C/C++开源库推荐

C/C开源库推荐 主要都是平常用到的&#xff0c;包含windows开发、android开发、后台开发、音视频开发、深度学习等等最后还附带几个其他语言开发的比较好的项目 GUI开发 qt 跨平台开发库&#xff0c;内部封装了各种跨平台工具&#xff0c;但是大多数情况下都被用作开发跨平台…...

编程日记 2023/8/1 11:54:49

git常用命令速查表

1.git add -u [<路径>]: 把<路径>中所有跟踪&#xff08;tracked&#xff09;文件中被修改过或已删除文件的信息添加到索引库。它不会处理未跟踪&#xff08;untracked&#xff09;的文件。省略<路径>表示&#xff1a;即当前目录。 2.git add -a [<路径&…...

编程日记 2023/8/1 11:53:48

让两个文件夹里的图片名字一模一样

为了做测试集&#xff0c;对应数据和真值 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))#根据你提供的文件名排序结果来看,问题可…...

编程日记 2023/8/1 11:52:47

会议OA系统会议管理模块开发思路（layui搭建）

目录 一.为什么要进行开发 1.开发目的 2.项目流程 A.发起会议请求过程 1.首先实现我们的多选下拉框功能&#xff01; 2.时间组件功能&#xff0c;并且提交我们新增加的会议内容 3.在进行发起会议编码时遇到的问题&#xff0c;BUG 3.1.有点时候js访问不到路径 3.2在增加…...

编程日记 2023/8/1 11:51:46

rsync 远程同步

目录 一、Rsync 简介 二、同步方式 备份的方式 三、常用Rsync命令 四、配置源的两种表达方法 五、配置服务端与客户端的实验 启动 rsync 服务程序 发起端&#xff08;192.168.158.21&#xff09; ​编辑 六. 发起端&#xff08;客户端&#xff09;配置 rsyncinotify c…...

编程日记 2023/8/1 11:50:45

PostgreSQL数据库中，查询时提示表不存在的解决办法

最近遇到一个奇怪的问题&#xff0c;以前从来没有遇到过&#xff0c;在postgres SCHEMA下执行select * from table1语句时&#xff0c;提示表不存在&#xff0c;而实际这个表确是存在的&#xff0c;只不过是在public SCHEMA下。在public SCHEMA下执行这个sql语句是没有问题的。…...

编程日记 2023/8/1 11:49:44

视频传输网安全防护体系

在电脑、手机信息安全保护得到广泛关注和普及的今天&#xff0c;监控摄像头等设备的安全防护仍为大众所忽略&#xff0c;大量视频监控网络的前端设备和数据没有任何保护&#xff0c;完全暴露在互联网中。 前端IP接入设备与后端业务系统处于直连状态&#xff0c;一旦有攻击者或…...

编程日记 2023/8/1 11:48:43

C# Blazor 学习笔记(1):Blazor基础语法，组件化和生命周期

文章目录 前言基础语法路由Page 页面元素条件生成if / elseforforeach 绑定参数绑定&#xff08;赋值&#xff0c;单向&#xff09;参数绑定&#xff08;双向&#xff09;事件绑定字典绑定 attributes 组件化如何使用Parameter 参数注入使用回调函数组件声明回调组件注入回调组…...

编程日记 2023/8/1 11:47:42

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) 参考 正如上图报错第三方…...

编程日记 2023/8/1 11:46:40

Navis：开源项目标准化开发环境与工具链配置框架实践

1. 项目概述&#xff1a;一个为开发者打造的“导航星图”如果你和我一样&#xff0c;常年混迹在开源项目的海洋里&#xff0c;那么你一定对这种感觉不陌生&#xff1a;面对一个全新的、功能强大的开源工具&#xff0c;兴奋地克隆了仓库&#xff0c;然后……就卡在了第一步。REA…...

编程新知 2026/5/17 5:46:28

基于树莓派与QT Py的本地化物联网红外遥控器DIY指南

1. 项目概述与核心价值想没想过&#xff0c;把家里那堆遥控器——电视的、机顶盒的、空调的、音响的——统统集成到一个你手机能打开的网页里&#xff1f;而且这个控制中心完全在你家局域网里运行&#xff0c;不依赖任何云服务&#xff0c;不用担心厂商倒闭后设备变砖。今天分享…...

编程新知 2026/5/17 5:29:35

Python Reddit数据采集与分析实战：从API调用到舆情监控

1. 项目概述与核心价值最近在开源社区里&#xff0c;一个名为openshrug/reddit-intel的项目引起了我的注意。乍一看&#xff0c;这像是一个针对 Reddit 平台的数据抓取或分析工具&#xff0c;但深入探究后&#xff0c;我发现它的定位远不止于此。它更像是一个为开发者、数据分析…...

编程新知 2026/5/17 5:17:24

量子最优控制中的iLQR算法实践与优化

1. 量子最优控制基础与挑战量子最优控制&#xff08;Quantum Optimal Control, QOC&#xff09;是现代量子计算中的核心技术&#xff0c;其核心目标是通过精心设计的控制脉冲序列&#xff0c;实现对量子系统状态演化的精确操控。在超导量子计算体系中&#xff0c;这一技术尤为重…...

编程新知 2026/5/17 4:11:42

如何让Photoshop图层批量导出速度提升3倍？这个开源脚本做到了！

如何让Photoshop图层批量导出速度提升3倍&#xff1f;这个开源脚本做到了&#xff01; 【免费下载链接】Photoshop-Export-Layers-to-Files-Fast This script allows you to export your layers as individual files at a speed much faster than the built-in script from Ado…...

编程新知 2026/5/17 3:46:04

OneQuery：统一异构数据源查询的抽象层设计与实战

1. 项目概述&#xff1a;一个查询&#xff0c;无限可能最近在折腾一个数据聚合项目&#xff0c;需要从多个异构数据源里捞数据&#xff0c;然后统一处理。这活儿听起来简单&#xff0c;但真干起来&#xff0c;每个数据源都有自己的查询语法、连接方式和返回格式&#xff0c;光是…...

编程新知 2026/5/17 3:35:31

龙芯3A6000平台Loongnix系统部署实战：从固件更新到驱动配置全解析

1. 项目概述&#xff1a;一次国产平台上的系统部署实战最近&#xff0c;我拿到了一台基于龙芯3A6000处理器和7A2000桥片的国产台式机。对于长期在x86/ARM生态里打转的开发者来说&#xff0c;这无疑是一个充满新鲜感和挑战的“新玩具”。它的核心使命&#xff0c;就是运行龙芯社…...

编程新知 2026/5/17 3:08:51

如何用Kafka-King轻松管理Kafka集群：5分钟上手完整指南

如何用Kafka-King轻松管理Kafka集群&#xff1a;5分钟上手完整指南 【免费下载链接】Kafka-King A modern and practical kafka GUI client &#x1f495;&#x1f389;Kafka-King 是一款现代化、实用的 Kafka GUI 客户端&#xff0c;旨在通过直观的桌面界面简化 Apache Kafka …...

编程新知 2026/5/17 2:43:35

Helm-Git插件：无缝集成Git与Helm，实现Kubernetes Chart的GitOps部署

1. 项目概述&#xff1a;Helm与Git的桥梁 如果你和我一样&#xff0c;长期在Kubernetes生态里打转&#xff0c;那你对Helm一定不陌生。作为Kubernetes的包管理器&#xff0c;它用Chart这个概念&#xff0c;把复杂的应用部署打包得井井有条。但不知道你有没有遇到过这样的场景&…...

编程新知 2026/5/17 1:39:24

避坑指南：在Python 3.7环境用ModelScope部署speech_campplus_sv_zh-cn_16k-common语音识别模型的完整流程

避坑指南&#xff1a;Python 3.7环境部署ModelScope语音识别模型的完整实践 在人工智能语音处理领域&#xff0c;说话人验证技术正逐渐成为身份认证和语音交互系统的核心组件。阿里云达摩院开源的speech_campplus_sv_zh-cn_16k-common模型作为轻量级解决方案&#xff0c;特别适…...

编程新知 2026/5/17 0:43:29