React Web请求000webhost报ERR_HTTP2_PROTOCOL_ERROR问题

• 跨域（CORS）拦截是Web端和React Native端表现差异的核心原因：React Native运行环境没有浏览器同源策略限制，同等请求逻辑可以直接连通后端；但React Web运行在浏览器安全沙箱内，当你从本地开发地址（如localhost:3000）请求000webhost部署的接口时，若后端没有返回匹配的CORS允许头，浏览器会直接拦截请求。000webhost免费层对跨域拦截的处理逻辑会直接重置HTTP2连接，最终抛出net::ERR_HTTP2_PROTOCOL_ERROR，外层捕获为TypeError: Failed to fetch。
• HTTP2预检请求兼容问题：Web端请求携带Content-Type: application/json时，浏览器会自动先发OPTIONS类型的跨域预检请求，000webhost免费层的HTTP2服务对这类预检请求没有做兼容响应时，会直接断开连接触发协议错误；React Native端不会自动触发预检流程，因此完全不受该问题影响。
• 空值提交触发的服务端异常：当前useState初始值为undefined，用户未输入内容就点击提交按钮时，序列化的请求体会携带空值字段，若PHP后端没有做空值容错，会抛出服务端错误，这类非标准响应在000webhost的HTTP2通道下也会被浏览器识别为协议错误。

• 在后端setCopytext.php的所有输出内容之前增加跨域响应头，同时兼容预检请求：

  header("Access-Control-Allow-Origin: *");
  header("Access-Control-Allow-Methods: POST, OPTIONS");
  header("Access-Control-Allow-Headers: Content-Type, Accept");
  // 直接响应预检请求，避免连接被重置
  if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
      http_response_code(200);
      exit;
  }
  

• 前端增加提交前的非空校验，避免空参数触发服务端报错：
  修改addCopytext函数开头逻辑：

  if (!password1?.trim() || !copytext?.trim()) {
      alert("请完整输入密码和待存储的文本");
      return;
  }
  

• 本地开发阶段可通过代理配置绕开跨域限制：在React项目根目录的package.json中增加代理配置：

  "proxy": "https://clipperfox.000webhostapp.com"
  

  配置后把fetch请求的完整地址替换为相对路径/setCopytext.php即可，无需修改后端CORS配置即可正常本地调试。
• 若仍触发HTTP2协议错误，可在浏览器开发者工具的网络面板中，勾选"禁用缓存"后重新发起请求，排除HTTP2长连接复用异常的问题。

内容的提问来源于stack exchange，提问作者Onion47.ak