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

server/2024/9/20 3:52:37/ 标签: 前端, php, 开发语言

跨源请求,也称为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"><?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);
?>

http://www.ppmy.cn/server/102061.html

相关文章

【51单片机】让AI识别电路图,帮你进行编码(以51单片机为例)

让AI识别电路图,帮你进行编码&#xff08;以51单片机为例&#xff09; ​ 这里使用的AI大模型使用的是 Copilot。&#xff08;两个前提&#xff1a;1. 科学上网、2. 有微软账号&#xff09; 今天测试了一下Copilot识别图片的能力&#xff0c;能力还是可圈可点的。 首先准备一…

C语言日常练习 Day17

目录 一、找出一个二维数组的鞍点 二、有一篇文章&#xff0c;共有3行文字&#xff0c;每行有80个字符。要求分别统计出其中的英文大写字母、小写字母、数字、空格以及其他字符的个数 三、有一行电文&#xff0c;已按下面规律编译成密码&#xff1a;A->Z,a->z,B->Y,…

wordpress视频模板

视频背景wordpress官网主题 红色风格的wordpress主题&#xff0c;首页视频背景&#xff0c;鼠标滚动翻转展示内容&#xff0c;适合公司官网使用。 https://www.jianzhanpress.com/?p7288 MCN传媒wordpress主题 红色风格wordpress大视频背景主题&#xff0c;适合做直播业务的…

【Harmony OS 4.0】水果排行榜案例

ets/example2/Models export class FruitsData {id: stringname: stringvote: stringconstructor(id: string, name: string, vote: string) {this.id idthis.name namethis.vote vote} }ets/example2/TitleComponent // app标题子组件 import APPContext from ohos.app.a…

【ARM 芯片 安全与攻击 5.4 -- Meltdown 攻击与防御介绍】

文章目录 什么是 Meltdown 攻击?Meltdown 攻击的基本原理Meltdown 攻击代码示例Meltdown 攻击在芯片中的应用应用场景Meltdown 攻击与瞬态攻击、测信道攻击的关系针对 Meltdown 攻击的防御硬件级防御Summary什么是 Meltdown 攻击? Meltdown 攻击是一种利用处理器乱序执行(o…

【网络编程】组播的实现(C语言,linux,Ubuntu)

组播 1> 组播也是实现一对多的通信方式&#xff0c;对于广播而言&#xff0c;网络需要对每个消息进行复制转发&#xff0c;会占用大量的带宽&#xff0c;导致网络拥塞 2> 组播可以实现小范围的数据传播&#xff1a;将需要接收数据的接收端加入多播组&#xff0c;发送端…

Linux---05---用户组权限

课程回顾 vim编辑器 本章重点 文件权限 用户管理 用户组管理 一、文件权限 由于Linux是一个多人多任务的系统&#xff0c;因此经常会出现同一台机器同时有多个人进行操作&#xff0c;为了考虑每个人的隐私权以及每个人喜好的工作环境&#xff0c;所以文件的权限归属就至关…

50Kg大载重六旋翼无人机技术详解

50Kg大载重六旋翼无人机的机体结构设计是确保其高承载能力和飞行稳定性的基础。该机体通常采用轻质高强度的材料如碳纤维、铝合金或复合材料构建&#xff0c;以在保证结构强度的同时减轻整机重量。设计过程中&#xff0c;需考虑空气动力学原理&#xff0c;优化机臂布局、机身形…

Leetcode面试经典150题-189.轮转数组

解法都在代码里&#xff0c;不懂就留言或者私信 class Solution {public void rotate(int[] nums, int k) {/**向右轮转 1 步: [7,1,2,3,4,5,6]向右轮转 2 步: [6,7,1,2,3,4,5]向右轮转 3 步: [5,6,7,1,2,3,4]....向右轮转 7 步: [1,2,3,4,5,6,7] *//**既然反转数组的倍数是不需…

oracle使用sql生成表结构文档

oracle使用sql生成表结构文档 背景 客户要求数据资产盘点,需要提供相关表字段的说明文档&#xff0c;指定具体格式。手动是不可能手动的&#xff0c; 使用SQL实现。 要求 实现 生成脚本sql 查询所有非临时表 SELECT table_name FROM all_tables WHERE temporary N;--默认…

sp-eric靶机

端口扫描 靶机ip地址为192.168.7.46 目录扫描 访问80端口 拼接访问 /admin.php 发现登录框 测试sql注入&#xff0c;弱口令等&#xff0c;无结果 扫描目录发现了.git文件&#xff0c;存在源码泄漏 将其下载到kali上读取 python2 GitHack.py -u http://192.168.7.180/.git/…

深入探索CANoe的CAPL语言

概述 在汽车电子和嵌入式系统开发领域&#xff0c;仿真和测试是确保功能正确性和性能标准的关键步骤。Vector公司的CANoe软件是这一领域的佼佼者&#xff0c;它提供了一个强大的平台&#xff0c;用于模拟、测试和分析汽车网络&#xff0c;特别是CAN网络。今天&#xff0c;我们…

无人机电池详解!!!

娱乐型和玩具型无人机 这类无人机的电池容量通常较小&#xff0c;以满足短时间娱乐飞行的需求。电池容量范围一般在500mAh至3000mAh之间&#xff0c;轻便、易携带&#xff0c;适合初学者和休闲玩家。 航拍无人机 普通航拍无人机追求高续航能力&#xff0c;电池容量一般在500…

玩转单例模式

目录 1. 饿汉式 2. 懒汉式 3. volatile解决指令重排序 4. 反射破坏单例模式 5. 枚举创建单例模式 所谓单例模式&#xff0c;就是是某个类的实例对象只能被创建一次&#xff0c;单例模式两种实现&#xff1a;饿汉式和懒汉式。 1. 饿汉式 所谓饿汉式&#xff0c;顾名思义…

Lambda表达式与流式编程

一、Lambda表达式 1.1 什么是lambda表达式 Lambda表达式是 jdk1.8 引入的一个新特性&#xff0c;它是函数式编程在Java中的一种体现。也是1.8最值得学习的新特性。 1. Lambda表达式实际上就是匿名内部类的简化版本。 2. Lambda表达式是jdk1.8引入的一个最重要的新特性&…

VUE(一)——nextTick

DOM更新循环结束后执行延迟回调&#xff0c;在数据修改以后立即使用该方法可获取更新后的DOM。 &#xff08;*问题1&#xff09;DOM更新循环&#xff1f; VUE中使用异步执行DOM更新&#xff0c;在修改数据之后视图不会立即更新&#xff0c;而是等同一事件循环中的所有数据变化…

Java后端面试题(mq相关)(day9)

目录 为什么用MQ&#xff1f; 异步 、削峰、解耦1. 异步处理2. 解耦3. 削峰填谷 Exchange类型什么是死信队列&#xff1f;如何保证消息的可靠性&#xff1f;RabbitMQ中如何解决消息堆积问题?RabbitMQ中如何保证消息有序性?如何防止消息重复消费&#xff1f;(如何保证消息幂等…

ARM——体系结构

计算机体系结构&#xff1a;冯诺伊曼 哈佛 冯诺依曼结构 冯诺依曼结构&#xff0c;也称冯诺依曼模型或普林斯顿结构&#xff0c;是根据冯诺依曼提出的存储程序概念设计的计算机体系结构。其主要特点包括&#xff1a; 存储程序&#xff1a;指令与数据都…

嵌入式 | 嵌入式 Linux 系统使用摄像头

点击上方"蓝字"关注我们 01、引言 >>> 在嵌入式 Linux 系统使用摄像头 俗话说“眼见为实”,这或许是为什么近年来摄像头在嵌入式系统上快速增长的原因。它们被用于不同的场景,如: 远程监控:典型的例子是闭路电视,监控人员在监视环境(或许你所在的大楼…

web开发环境搭配与创建javaee项目

一.web开发 (1)web开发指的是前端,后端,以及数据库进行交互&#xff0c;前端发送请求到后端&#xff0c;后端经过程序处理后到达数据库&#xff0c;最后在进行后端处理响应回前端。 (2)一次三端交互的doget或者dopost简单请求流程 (3)web开发除了需要前端,后端,数据库开发工具…