使用Express.js+React部署至Render/Azure时遭遇CORS错误求助

本地运行Express后端+React前端项目一切正常，但部署到Render（以及Azure）平台后，前端请求后端/login接口时触发CORS拦截，错误信息如下：

Access to XMLHttpRequest at 'https://book-listing-app-api.onrender.com/login' from origin 'https://book-listing-app.onrender.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

已尝试以下操作但均无效：

• 前端手动添加Access-Control-Allow-Origin请求头（已注释）
• 用fetch替代axios排查默认配置问题
• 后端配置cors中间件指定origin、credentials等参数
• 在/login接口中手动设置Access-Control-Allow-Origin响应头
• 联系Render官方确认平台不影响CORS

前端Login组件代码 #

function Login() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [redirect, setRedirect] = useState(false);

  async function loginUser(e) {
    e.preventDefault();

    try {
      const response = await axios.post(
        `${process.env.REACT_APP_SERVER_URL}/login`,
        {
          username: username,
          password: password,
        },
        {
          withCredentials: true,
          // headers: {
          //   "Access-Control-Allow-Origin": "https://book-listing-app.onrender.com",
          // },
        }
      );
      // const response = await fetch(
      //   `${process.env.REACT_APP_SERVER_URL}/login`,
      //   {
      //     method: "POST",
      //     headers: { "Content-Type": "application/json"},
      //     body: JSON.stringify({
      //       username: username,
      //       password: password,
      //     }),
      //     credentials: 'include'
      //   }
      // );
      if (response.status === 200) {
        setRedirect(true);
      }
    } catch (err) {
      if (err.response.status === 401) {
        alert("Invalid username or password");
      }
    }
  }

后端CORS中间件配置 #

const cors = require('cors');

app.use(
  cors({
    credentials: true,
    origin: 'https://book-listing-app.onrender.com',
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    allowedHeaders: ['content-type', 'Authorization', 'token'],
  }),
);
// app.options('/login', cors());

后端/login接口代码 #

app.post('/login', (req, res) => {
  try {
    const { username, password } = req.body;
    console.log(username, password);

    if (!username || !password) {
      return res
        .status(400)
        .json({ error: 'Username and password are required' });
    }

    const q = 'SELECT * FROM book_store.users WHERE username = ?';

    db.query(q, [username], (err, data) => {
      console.log('Query Error:', err);
      console.log('Query Result:', data);
      if (err) {
        console.log(data);
      }

      if (data.length === 1) {
        const { id, username, password: storedPass } = data[0];
        console.log('Entered password:', password);
        console.log('Stored hashed password:', storedPass);
        const passMatch = bcrypt.compareSync(password, storedPass);
        if (passMatch) {
          jwt.sign(
            {
              id,
              username,
            },
            secret,
            {
              expiresIn: '1h',
            },
            (err, token) => {
              if (err) {
                console.log(err);
              } else {
                // res.set('Access-Control-Allow-Origin', 'https://book-listing-app.onrender.com');
                res.cookie('token', token).json({ id, username });
              }
            },
          );
        }
      } else {
        res.status(401).json({ error: 'Invalid username or password' });
      }
    });
  } catch (err) {
    console.error(err);
    return res.status(500).json({ message: 'Internal server error' });
  }
});

已尝试上述多种方法仍无法解决CORS拦截问题，部署到Azure后同样出现相同错误，求可行的解决办法。

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