前端调用API遇CORS错误，如何获取响应并打印到console.log？

当服务器端无法配置CORS规则时，前端直接调用接口必然会触发浏览器的跨域限制，以下是几种可行的解决办法：

1. 搭建代理服务器（生产环境可用） #

这是最通用且靠谱的方案，原理是通过自己的后端服务转发请求——后端服务不存在跨域限制，可以自由调用目标接口，再把响应结果返回给前端。

示例：Node.js + Express 代理服务器 #

// 代理服务代码
const express = require('express');
const fetch = require('node-fetch');
const app = express();
const port = 3000;

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

// 定义代理接口
app.post('/proxy-target', async (req, res) => {
  try {
    const targetApiUrl = '你的目标接口地址';
    // 转发请求到目标接口
    const response = await fetch(targetApiUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 按需添加目标接口要求的其他请求头
      },
      body: JSON.stringify(req.body)
    });
    const responseData = await response.json();
    // 将目标接口的响应返回给前端
    res.json(responseData);
  } catch (err) {
    res.status(500).json({ error: '代理请求失败' });
  }
});

app.listen(port, () => {
  console.log(`代理服务运行在 http://localhost:${port}`);
});

前端调用代理接口 #

// 前端处理表单请求的代码
const formData = { /* 你的表单数据 */ };

fetch('http://localhost:3000/proxy-target', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(formData)
})
.then(res => res.json())
.then(data => {
  console.log('接口响应内容:', data);
  // 这里可以将data存入变量做后续操作
})
.catch(err => console.error('请求出错:', err));

2. 浏览器扩展（仅开发调试用） #

开发阶段可以用浏览器扩展绕过CORS限制，比如Chrome的「Allow CORS: Access-Control-Allow-Origin」。启用扩展后，浏览器会自动添加必要的CORS响应头，让你能正常获取接口响应。

⚠️ 注意：这个方案只能用于本地调试，不能给生产环境的用户使用——用户不会特意去装这个扩展。

3. 检查目标接口是否支持JSONP（仅GET请求适用） #

如果目标接口支持JSONP，可以用这种方式请求，但JSONP只支持GET方法，你的场景是POST请求，所以这个方案大概率不适用，仅作补充说明。

为什么你之前的尝试无效？ #

• 使用no-cors模式时，浏览器会将响应标记为「不透明响应」，出于安全策略，完全禁止前端读取响应内容，所以只能发请求，拿不到结果。
• 前端设置Allow-Origin、Allow-Method这类请求头完全没用——这些是服务器端需要返回的响应头，前端请求时设置不生效。

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