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

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

news 2026/3/26 8:26:32

跨源请求，也称为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设置

相关文章：

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

Ted靶机

HarmonyOS ArkTS 构建布局

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

8月8日学习笔记 python基础

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

Gerrit 使用教程

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

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

计算机网络部分基础知识

WESWOO合作的出海企业（一）

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

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

ps快捷键，学习

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

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

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

WSL 忘记ubuntu的密码

github项目-创建一个新分支

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

会Python可以找什么工作?

别再死记硬背了！用ChatGPT/Claude帮你理解AIGC面试题（附Prompt）

熵权法背后的信息论：为什么你的特征权重计算总不准？

SDMatte透明PNG元数据规范：EXIF/IPTC嵌入、版权信息自动写入功能

深入理解Vue中.native修饰符在Element UI组件事件绑定的应用

Flowable 6.3.0 从安装到实战：手把手教你搭建第一个BPMN流程（附MySQL 8.0避坑指南）

保姆级教程：造相Z-Image文生图模型v2快速上手，一键生成768高清图

Qwen2.5-72B-Instruct-GPTQ-Int4镜像定制：添加自定义工具函数与插件

CosyVoice 2 目标音色替换技术解析：从原理到小白友好实现

计算机毕业设计：美食推荐系统设计与协同过滤算法实现 Django框架爬虫协同过滤推荐算法可视化推荐系统数据分析大数据（建议收藏）✅