API请求遇Access-Control-Allow-Origin错误，如何匹配PHP实现？

我来帮你拆解一下问题，你的Fetch代码主要有两个地方和PHP Curl实现不一致，同时CORS问题也需要临时处理——毕竟API维护人员不在，没法改服务器配置。

1. 修正Fetch的请求体格式，匹配PHP Curl的逻辑 #

先看你的PHP代码，它发送的是application/x-www-form-urlencoded格式的表单数据：把username和password拼接成username=test@mail.com&password=123这种字符串作为请求体，同时还带上了cache-control: no-cache的请求头。

而你的Fetch代码犯了两个小错误：

• 错误地用JSON.stringify()把数据转成了JSON字符串，这和Curl的请求体格式完全不匹配，服务器可能无法正确解析你的参数
• 缺少了PHP里的cache-control: no-cache请求头

修改后的Fetch代码应该这样写：

fetch("https://url.com/api/login/", {
  method: "post",
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'cache-control': 'no-cache' // 和PHP Curl保持一致的请求头
  },
  // 用URLSearchParams自动生成符合格式的请求体，避免手动拼接的编码问题
  body: new URLSearchParams({
    username: "test@mail.com",
    password: "123"
  })
}).then(function (response) {
  return response.json();
}).then(function (myJson) {
  console.log(myJson);
}).catch(err => console.error('请求出错:', err));

2. 临时解决CORS错误（服务器端无法修改时） #

浏览器的同源策略会拦截直接发起的跨域请求，而Postman和PHP Curl不受这个限制，所以它们能正常工作。在API维护人员回来之前，你可以用这两个临时方案：

• 浏览器插件临时绕过CORS：安装「Allow CORS: Access-Control-Allow-Origin」这类插件，开启后浏览器会自动添加跨域相关的响应头，让你的请求能正常通过。注意：这只适合开发调试用，绝对不能用于生产环境。
• 本地代理服务器：用Node.js搭建一个简单的代理，把前端请求转发到目标API，绕开同源策略。步骤如下：
  1. 安装依赖：

     npm install express http-proxy-middleware --save-dev
     

  2. 创建proxy.js文件：

     const express = require('express');
     const { createProxyMiddleware } = require('http-proxy-middleware');
     const app = express();
     
     app.use('/api', createProxyMiddleware({
       target: 'https://url.com',
       changeOrigin: true,
     }));
     
     app.listen(3000, () => {
       console.log('代理服务器运行在http://localhost:3000');
     });
     

  3. 启动代理服务器后，修改你的Fetch请求地址：

     fetch("http://localhost:3000/api/login/", { /* 其他参数和上面修正后的一致 */ })
     

内容的提问来源于stack exchange，提问作者stacky