React客户端借Express规避CORS，能否在fetch中传递目标API URL？

你的思路完全正确！通过Express搭建中间层代理，让客户端请求自己的/api路由，再由服务端转发请求到第三方API，确实是解决浏览器CORS限制的经典方案——毕竟浏览器的同源策略只约束客户端发起的请求，服务端之间的请求不受这个限制。

接下来针对你提到的「传递目标API URL给服务端」的需求，我来梳理可行的实现方式，同时修正你代码里的小问题：

一、客户端请求的正确写法 #

你代码里的fetch('/api', {data: url})是伪代码，实际fetch的配置里没有data这个参数，你可以通过两种方式传递目标URL：

方式1：通过请求体（POST）传递 #

如果目标URL较长或者包含敏感参数（比如你的client_id），建议用POST请求把URL放在请求体里：

// 客户端代码
const { current, amount, page} = this.pagination; 
const { client_id, search } = this.API; 
const limit = `_limit=${amount}`; 
let currentPage; 
let targetUrl; 

if(this.isFetching) return; 

if(direction == 'next'){ 
  this.pagination.current = current + amount; 
  currentPage = page + 1; 
  const offset = `_offset=${this.pagination.current}`; 
  targetUrl = `${search}${client_id}&${limit}&${offset}`; 
} else { 
  if(page !== 1) { 
    this.pagination.current = current - amount; 
    currentPage = page - 1; 
    const offset = `_offset=${this.pagination.current}`; 
    targetUrl = `${search}${client_id}&${limit}&${offset}`; 
  }
}

// 确保targetUrl存在再发起请求
if(targetUrl) {
  fetch('/api', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ targetUrl }) // 把目标URL放在请求体里
  })
  .then(response => response.json())
  .then(data => {
    this.fetchedProperties = [...data.search_results];
    this.pagination.page = currentPage;
    this.isFetching = false;
  })
  .catch(err => {
    console.error('请求失败:', err);
    this.isFetching = false;
  });
}

方式2：通过查询参数（GET）传递 #

如果目标URL是公开且长度较短的，也可以把它作为查询参数传给服务端：

// 客户端代码
// ...（前面的URL生成逻辑不变）
fetch(`/api?targetUrl=${encodeURIComponent(targetUrl)}`)
  .then(response => response.json())
  // ...后续逻辑同上

二、服务端（server.js）的代理实现 #

不管用哪种方式，服务端都需要接收客户端传递的目标URL，然后发起实际的请求到第三方API：

对应POST方式的服务端代码 #

// server.js
const express = require('express');
const axios = require('axios'); // 推荐用axios，比原生http模块更易用
const app = express();

// 解析JSON请求体
app.use(express.json());

app.post('/api', async (req, res) => {
  try {
    const { targetUrl } = req.body;
    // 发起代理请求到第三方API
    const response = await axios.get(targetUrl);
    // 把第三方API的响应返回给客户端
    res.json(response.data);
  } catch (err) {
    console.error('代理请求失败:', err);
    res.status(err.response?.status || 500).json({ error: '代理请求失败' });
  }
});

// 启动服务
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

对应GET方式的服务端代码 #

// server.js
app.get('/api', async (req, res) => {
  try {
    const targetUrl = decodeURIComponent(req.query.targetUrl);
    const response = await axios.get(targetUrl);
    res.json(response.data);
  } catch (err) {
    console.error('代理请求失败:', err);
    res.status(err.response?.status || 500).json({ error: '代理请求失败' });
  }
});

三、额外注意事项 #

• 安全性：如果传递的targetUrl是用户可控的，要做校验，防止被用来发起恶意请求（比如 SSRF 攻击）。比如你可以提前限定第三方API的域名，只允许转发到指定的域名下：

  // 服务端添加域名校验
  const allowedDomain = 'https://your-third-party-api.com';
  if (!targetUrl.startsWith(allowedDomain)) {
    return res.status(403).json({ error: '不允许的请求目标' });
  }
  

• 错误处理：记得在客户端和服务端都添加错误捕获逻辑，避免请求失败导致页面状态异常。
• 本地开发跨域配置：如果你的React客户端和Express服务端运行在不同端口，需要在Express里配置CORS：

  const cors = require('cors');
  app.use(cors()); // 本地开发可以直接用，生产环境可以配置具体的 origin
  

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