React前端调用API遇CORS错误，无后端权限如何解决？

一、先修复代码中的语法错误 #

你的模板字符串拼接存在语法问题，${PROXY_URL}{API_URL}会将{API_URL}作为纯字符串拼接，导致请求地址无效，需改为${PROXY_URL}${API_URL}。修正后的queryFn代码：

queryFn: async () => {
  try {
    const response = await axios.get(`${PROXY_URL}${API_URL}`);
    return response.data;
  } catch (error) {
    console.log(`Server error: ${error}`);
    throw error;
  }
},

二、CORS问题的长期解决方案（无需修改后端） #

由于你无权限修改后端CORS配置，以下是不同场景下的可靠替代方案：

1. 本地开发环境：React内置代理 #

若使用create-react-app搭建项目，可直接在package.json中添加proxy字段，自动转发API请求并处理CORS：

{
  "name": "your-app",
  "proxy": "https://your-target-api-domain.com"
}

之后请求时直接写相对路径（如axios.get('/api/products')），React会自动转发到目标API地址。

如果需要多源代理等复杂规则，创建src/setupProxy.js文件，使用http-proxy-middleware：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://your-target-api-domain.com',
      changeOrigin: true,
    })
  );
};

2. 本地开发环境：浏览器插件临时绕过CORS #

仅用于开发测试，生产环境不可用：

• 安装类似"Allow CORS: Access-Control-Allow-Origin"的浏览器插件，开启后可临时跳过浏览器的CORS校验。

3. 生产环境：自行部署CORS代理 #

不要依赖公共cors-anywhere服务，可自行部署轻量代理：

方案A：Node.js部署自定义CORS代理

基于cors-anywhere开源逻辑搭建，部署到自有服务器（如Vercel、ECS）：

const corsAnywhere = require('cors-anywhere');

const host = process.env.HOST || '0.0.0.0';
const port = process.env.PORT || 8080;

corsAnywhere.createServer({
  originWhitelist: [], // 允许所有源，或指定特定域名
  requireHeader: ['origin', 'x-requested-with'],
  removeHeaders: ['cookie', 'cookie2']
}).listen(port, host, () => {
  console.log(`CORS proxy running on ${host}:${port}`);
});

方案B：Cloudflare Workers无服务器代理

编写Worker脚本转发请求并添加CORS头，无需服务器：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);
  const targetUrl = url.searchParams.get('url');
  if (!targetUrl) return new Response('Missing url parameter', { status: 400 });

  const response = await fetch(targetUrl, {
    headers: request.headers,
    method: request.method,
    body: request.body,
    redirect: 'follow'
  });

  const modifiedHeaders = new Headers(response.headers);
  modifiedHeaders.set('Access-Control-Allow-Origin', '*');
  modifiedHeaders.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  modifiedHeaders.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');

  return new Response(response.body, {
    status: response.status,
    headers: modifiedHeaders
  });
}

部署后，请求地址格式为https://your-worker-domain.workers.dev?url=your-target-api-url。

4. 生产环境：Nginx反向代理 #

若前端部署在自有服务器，可通过Nginx配置反向代理并添加CORS头：

server {
  listen 80;
  server_name your-frontend-domain.com;

  location /api {
    proxy_pass https://your-target-api-domain.com;
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
    add_header Access-Control-Allow-Headers 'Content-Type, Authorization';

    if ($request_method = OPTIONS) {
      return 204;
    }
  }
}

前端直接请求/api/products，Nginx会转发到目标API并自动处理CORS。

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