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

fetch跨域请求数据的前端设置和后端php的header设置

news 2026/2/8 13:51:43

跨源请求，也称为CORS（Cross-Origin Resource Sharing）请求，是Web开发中常见的一种需求，允许一个网页的JavaScript代码向与该网页不同源的服务器发出HTTP请求。以下是使用JavaScript中的fetch函数进行跨源请求的一个基本示例：
这里做测试的是前端http://127.0.0.1:5500/fetchcors.html
后端：http://xuejx.xyz/fetchcors.php
他们是在不同的域下，进行跨域请求

<html><head><meta http-equiv="content-type" content="text/html;charset=UTF-8"/><title>测试fetch的跨域请求</title></head><body><script>//跨域请求后端URLconst url='http://xuejs.xyz/fetchcors.php';//fetch的第2个参数init对象配置const options={method:'GET',//请求模式getheaders:{'Content-Type':'application/json'//设置请求标头数据为json格式},};fetch(url,options).then((response)=>{if(!response.ok){throw new Error('network response was not ok');}//response.type是请求返回的数据特征，这里结果为：cors表示跨域console.log(response.type);//获取后端返回数据转化为json，json()是response的方法，会自动转化为jsonreturn response.json();}).then(data=>{console.log(data);//显示返回数据}).catch(error=>{console.log('fetch操作发生一个错误：',error);});</script></body>
</html>

//后端fetchcors.php
// 检查是否是OPTIONS请求，如果是，则发送CORS预检请求的响应
if ($_SERVER[‘REQUEST_METHOD’] == ‘OPTIONS’) {
header(‘Access-Control-Allow-Origin: *’); // 允许跨域访问的域名，*代表允许所有域名
header(‘Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS’); // 允许的HTTP方法这几种
header(‘Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With’); // 允许的头信息有这三种
header(‘Access-Control-Max-Age: 1728000’); // 设置预检请求的有效时间
exit;
}

<?php
//允许前端请求的域名
$allow_orgin='http://127.0.0.1:5500';
//OPTIONS 请求方式是 HTTP 协议中的一种，主要用于从响应头中获取服务器支持的HTTP请求方式
if($_SERVER['REQUEST_METHOD']=='OPTIONS')
{header('Access-Control-Allow-Origin:'.$allow_orgin);//设置前端跨域的域名header('Access-Control-Allow-Methods:GET');//请求方式为GETheader('Access-Control-Allow-Headers:Content-Type');//请求的数据格式header('Access-Control-Max-Age:300000');//请求的预检时间为5分钟exit;//设置完后退出
}
//现在设置本页面的数据格式
header("Content-Type:application/json");
//本页面允许的跨域请求前端域名
header('Access-Control-Allow-Origin:'.$allow_orgin);
//返回给前端的数据
$data=['id'=>1,'name'=>'James doe','email'=>'James@163.com'
];
echo json_encode($data);
?>

相关文章：

fetch跨域请求数据的前端设置和后端php的header设置

跨源请求&#xff0c;也称为CORS&#xff08;Cross-Origin Resource Sharing&#xff09;请求&#xff0c;是Web开发中常见的一种需求&#xff0c;允许一个网页的JavaScript代码向与该网页不同源的服务器发出HTTP请求。以下是使用JavaScript中的fetch函数进行跨源请求的一个基本…...

编程日记 2024/8/15 3:56:52

Ted靶机

信息收集&#xff1a; 靶机地址&#xff1a;https://www.vulnhub.com/entry/ted-1,327/ &#xff08;1&#xff09;ip扫描 nmap 192.168.254.0/24 -sn | grep -B 2 00:0C:29:FF:7F:9A &#xff08;2&#xff09;端口扫描 nmap -p- -A 192.168.254.159 &#xff08;3&#x…...

编程日记 2024/8/15 3:55:51

HarmonyOS ArkTS 构建布局

在 HarmonyOS 中&#xff0c;ArkTS 是一种基于 TypeScript 的编程语言&#xff0c;专为开发 HarmonyOS 应用而设计。构建布局是开发应用的关键步骤之一。以下是如何在 ArkTS 中构建布局的基本指南。 1. 创建项目和页面 首先&#xff0c;确保已经创建了一个 HarmonyOS 项目。如…...

编程日记 2024/8/15 3:52:46

yolov5详解（二）：通过yaml文件构建完整模型

依然拿yolov5l v6.0版本来讲解 1. yaml文件 以下是yolov5l.yaml文件内容 # YOLOv5 &#x1f680; by Ultralytics, GPL-3.0 license# Parameters nc: 80 # number of classes depth_multiple: 1.0 # model depth multiple width_multiple: 1.0 # layer channel multiple …...

编程日记 2024/8/15 3:50:44

8月8日学习笔记 python基础

1.环境 python2&#xff0c; python3 yum list installed|grep python yum -y install python3 # 最新安装3.12可以使⽤源码安装&#xff0c;教程是在第⼀个星期pdf python3 --version 3.6.8 #进⼊到python的编辑状态 python3 # 如果直接输⼊python&#xff0c;也会进⼊到pyth…...

编程日记 2024/8/15 3:48:42

电动自行车出海黑马Avento独立站拆解（上）丨出海笔记

这次我们来拆解一个电动自行车的独立站 为什么选电动自行车&#xff1f; 因为全球疫情&#xff0c;带来出行问题——避免聚集&#xff0c;大家都减少了公共交通工具&#xff0c;而改为自行车&#xff0c;电动自行车...... 君不见疫情之后无论是出行自行车&#xff0c;还是健…...

编程日记 2024/8/15 3:47:41

Gerrit 使用教程

一、Gerrit简介 Gerrit&#xff0c;一种开放源代码的代码审查软件&#xff0c;使用网页界面。利用网页浏览器&#xff0c;同一个团队的程序员&#xff0c;可以相互审阅彼此修改后的代码&#xff0c;决定是否能够提交&#xff0c;退回或是继续修改。它使用版本控制系统Git作为底…...

编程日记 2024/8/15 3:46:39

sudu提权命令账号安全控制（su命令）执行单个命令并返回原用户、执行多个命令并返回原用户、保持当前环境变量、配置文件/etc/sudoers

su命令 su 命令是 Linux 和 Unix 系统中用于切换用户身份的命令。它允许一个用户变成另一个用户并以该用户的权限运行命令或启动新的 shell 会话。 基本语法 su [选项] [用户名] 用途&#xff1a; su[选项][-][用户[arg]…] 将有效用户id和组id更改为user的id。 A merely-im…...

编程日记 2024/8/15 3:43:35

【线性代数】【二】2.7 矩阵的秩

文章目录 前言一、向量组的秩二、矩阵的秩三、矩阵的可逆性与秩总结 前言 在前面的内容中&#xff0c;我们已经陆陆续续地给出了秩的概念。本文可以看成是对以往概念与性质的总结&#xff0c;那专门针对秩进行分析。 一、向量组的秩 在笔记2.2中&#xff0c;我们学习了极大线…...

编程日记 2024/8/15 3:41:34

计算机网络部分基础知识

网络协议的意义 单台主机内部的设备之间需要发送和接收消息&#xff0c;那么和相隔很远的两台主机之间发送消息有什么区别呢&#xff1f;两台主机通过网络发送消息&#xff0c;相当于两个网卡设备之间进行通信&#xff0c;最大的区别在于距离变长了。而距离变长带来的结果就是&…...

编程日记 2024/8/15 3:39:31

WESWOO合作的出海企业（一）

分享一些我们在shopify开发上合作的品牌介绍1. **韶音科技&#xff08;SHOKZ&#xff09;**&#xff1a; - WESWOO为韶音科技设计了多个产品页面&#xff0c;如OPENFIT、OPENSWIMPRO等&#xff0c;这些页面展示了产品特点、滑动特效、比较功能等&#xff0c;并通过品牌VI统一&a…...

编程日记 2024/8/15 3:38:29

vue 项目中 使用vxe-grid 表格中给表格的表头设置特殊的格式 ， 并且给指定的列文字设置颜色

项目场景&#xff1a; 相关背景&#xff1a; vue 项目中 使用vxe-grid 表格中给表格的表头设置特殊的格式&#xff0c;并为指定的列文字设置颜色 实现方案&#xff1a; 具体实现方法及步骤&#xff1a; 一、给表格的表头设置特殊的格式 实现方式一&#xff1a; :header-row-s…...

编程日记 2024/8/15 3:34:24

基于SpringBoot的企业资产管理系统

TOC springboot117基于SpringBoot的企业资产管理系统 系统概述 1.1 研究背景 智慧养老是面向居家老人、社区及养老机构的传感网系统与信息平台&#xff0c;并在此基础上提供实时、快捷、高效、低成本的&#xff0c;物联化、互联化、智能化的养老服务。 随着科技进步&#…...

编程日记 2024/8/15 3:32:23

ps快捷键，学习

ps快捷键图片变的特别大&#xff0c;归位&#xff0c;ctrl0背景图层锁住 选中图层&#xff0c;点击顶部图层&#xff0c;新建&#xff0c;背景图层&#xff0c;确定&#xff0c;就解开了&#xff0c;想在锁住&#xff0c;在点一次...

编程日记 2024/8/15 3:31:22

python代码模拟服务器实验2：IO多路复用select

实验代码的环境是在windows&#xff0c;和linux是有差别的 在Windows系统上&#xff0c;select模块需要传递特定的对象类型&#xff0c;而不是文件描述符。在Unix-like系统上&#xff0c;文件描述符是一个整数&#xff0c;而在Windows上&#xff0c;select期望得到的是socket对…...

编程日记 2024/8/15 3:29:20

修改ubuntu的终端显示语言为英文，界面保持为中文

修改ubuntu的终端显示语言为英文&#xff0c;界面保持为中文 sudo nano /etc/default/locale LANGzh_CN.UTF-8nano ~/.bashrc 在文件未尾加入下列两行 export LANGen_US.UTF-8 export LANGUAGEen在终端执行 source ~/.bashrc之后提示语言就变成英文了...

编程日记 2024/8/15 3:27:17

重塑园区生态，引领产业智慧化新飞跃

中服云智慧园区平台基于工业物联网平台&#xff0c;在园区场景中集中运用云计算、物联网、大数据、人工智能、数字孪生、边缘计算等新一代信息技术。秉承产业主导、业务主导、效率主导的理念&#xff0c;通过一体化子系统集成、智慧化业务管理、可视化运营分析、人性化客户服务…...

编程日记 2024/8/15 3:25:15

WSL 忘记ubuntu的密码

文章目录 1. 以管理员身份打开 PowerShel2.输入命令 wsl.exe -d Ubuntu-20.04 --user root3.输入命令 passwd username 修改用户密码&#xff0c;username即待重置的用户的名称 1. 以管理员身份打开 PowerShel 2.输入命令 wsl.exe -d Ubuntu-20.04 --user root 注意版本号是自…...

编程日记 2024/8/15 3:24:14

github项目-创建一个新分支

在远程仓库创建一个分支实际上是在本地创建一个分支&#xff0c;然后将该分支推送到远程仓库。这是因为在 Git 中&#xff0c;您不能直接在远程仓库创建分支&#xff0c;而需要先在本地创建分支&#xff0c;然后将该分支推送到远程仓库。 以下是创建并推送新分支到远程仓库的步…...

编程日记 2024/8/15 3:22:11

Java设计模式中介者模式的优势与局限性分析

Java设计模式中介者模式的优势与局限性分析 一、引言 在软件工程中&#xff0c;设计模式是一种经过验证的解决方案&#xff0c;用于解决软件开发中常见的问题。设计模式的使用可以提高代码的复用性、可维护性和可扩展性。中介者模式&#xff08;Mediator Pattern&#xff09;…...

编程日记 2024/8/15 3:15:05

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2026/1/28 2:18:42

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/10/12 11:54:26

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2026/1/23 4:56:05

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2026/1/24 13:05:24

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2026/2/6 20:07:35

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2026/1/26 13:29:00

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2026/1/31 6:12:22

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/10/22 6:06:44

脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

编程新知 2026/2/3 4:26:32

rknn toolkit2搭建和推理

安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 &#xff0c;不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源&#xff08;最常用&#xff09; conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...

编程新知 2026/2/7 7:52:41