前端调用API遇https.Agent兼容错误，寻求解决方法

错误原因分析 #

• 你在前端React代码里导入了Node.js专属的https模块，浏览器环境没有这个模块，所以抛出Module "https" has been externalized for browser compatibility错误。
• 你想通过服务器发起请求绕过CORS的思路是对的，但不能把服务端代码写在前端文件里，必须单独搭建一个后端代理服务。

解决方案步骤 #

1. 搭建后端代理服务（以Express为例） #

新建后端文件server.js：

const express = require('express');
const axios = require('axios');
const https = require('https');
const cors = require('cors');

const app = express();
app.use(cors()); // 允许前端跨域请求

// 代理接口，转发请求到目标API
app.get('/api/correios', async (req, res) => {
  const headers = {
    key: "TOKEN", 
    "Content-Type": "application/json",
  };
  const correiosApiUrl = "URL_API";

  try {
    const response = await axios.get(correiosApiUrl, {
      headers: headers,
      httpsAgent: new https.Agent({ rejectUnauthorized: false }),
    });
    res.json(response.data);
  } catch (error) {
    console.error("Erro ao acessar a API dos Correios:", error.message);
    res.status(500).json({ error: error.message });
  }
});

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

安装依赖并启动后端：

npm install express axios cors
node server.js

2. 修改前端请求代码（getChamados.js） #

移除https模块导入，改为请求自己的后端代理接口，同时确保返回数据：

import axios from "axios"

const getCorreiosData = async () => {
  try {
    // 请求本地代理接口
    const response = await axios.get('http://localhost:3001/api/correios')
    console.log(response.data);
    return response.data; // 返回数据给前端组件
  } catch (error) {
    console.error("Erro ao acessar a API dos Correios:", error.message)
    throw error; // 抛出错误让前端捕获
  }
}

export default getCorreiosData

3. 修复前端Home组件问题 #

给useEffect添加空依赖数组避免无限循环，同时处理请求错误：

import { useState, useEffect } from "react"
import getCorreiosData from "./getChamados"
import "./Home.css"

const Home = () => {
  const [correiosData, setCorreiosData] = useState(null)
  const [error, setError] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const data = await getCorreiosData();
        setCorreiosData(data);
      } catch (err) {
        setError(err.message);
      }
    };
    fetchData();
  }, []); // 空依赖数组，组件挂载时仅执行一次

  return (
    <div>
      <h1>Home</h1>
      {correiosData && <pre>{JSON.stringify(correiosData, null, 2)}</pre>}
      {error && <p style={{color: 'red'}}>Error: {error}</p>}
    </div>
  )
}

export default Home

额外说明 #

• Postman和终端能正常请求是因为它们不受浏览器CORS政策限制，且可以使用Node.js的https模块。
• 生产环境请勿设置rejectUnauthorized: false，这会跳过SSL证书验证，存在安全风险，建议配置合法证书。

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