Ubuntu Web服务器跨域请求被拦截，Access-Control-Allow-Origin头无效

问题概述 #

我将React应用部署到Ubuntu Web服务器，服务器内包含两个处理请求的文件，但客户端无法向后端发起请求。直接在浏览器访问http://192.168.178.70:30100/Ergebnisse可正常返回数据，说明后端服务本身可用，但从Web服务器发起请求时被拦截，错误信息如下：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:30100/Results. (Reason: CORS request did not succeed). Status code: (null).

相关代码 #

Server.js（后端） #

const express = require('express')
const mysql = require('mysql')
const cors = require('cors')
const bodyParser = require('body-parser');

const app = express()
app.use(cors({
    origin: ['*']
}))
app.use(bodyParser.json());

const db = mysql.createConnection({
    host: '192.168.178.70',
    user: 'webserver',
    password: '123',
    database: 'lanparty',
    port: '3306'
})


app.get('/Ergebnisse', (req, res) => {
    console.log("gotRequest")

    db.query("SELECT * FROM lanparty.match;", (err, data) => {
        if (err) {
            console.log(err)
            res.json(err)
        } else {
            res.json(data)
        }  
    })
})


app.listen(30100, () => {
    console.log("Listening....")
})

Results.js（前端React组件） #

import { useEffect } from "react"
import axios from "axios";

export default function Results() {

  useEffect(() => {
    console.log("fetching...")
    axios.get('http://localhost:30100/Results')
      .then(response => response.json())
      .then(data => {
        console.log("data")
        console.log(data)
      })
      .catch((error) => {
        console.error("Error:")
        console.log(error)
      });

  }, [])

  return (
    <div className="pageDiv">

      <h2>Results</h2>

    </div>
  );
}

已尝试的解决方案 #

• 使用cors({origin: ['*']})配置允许所有跨域请求
• 在cors配置中指定localhost、127.0.0.1、服务器IP等具体源
• 在app.get接口中通过res.setHeader("Access-Control-Allow-Origin", "localhost");设置响应头，也尝试了"*"和"127.0.0.1"

解决步骤 #

1. 修正接口路径不匹配问题 #

后端定义的接口路径是/Ergebnisse，但前端请求的是/Results，路径不一致会导致请求返回404，进而触发CORS相关错误。

2. 修正前端请求地址 #

部署到服务器后，前端不能再请求localhost:30100（localhost指客户端本地，而非服务器），需要替换为服务器的IP地址192.168.178.70。

修改后的Results.js代码 #

import { useEffect } from "react"
import axios from "axios";

export default function Results() {

  useEffect(() => {
    console.log("fetching...")
    // 替换为服务器IP和正确的接口路径
    axios.get('http://192.168.178.70:30100/Ergebnisse')
      .then(response => {
        // axios会自动解析JSON，无需手动调用response.json()
        console.log("data")
        console.log(response.data)
      })
      .catch((error) => {
        console.error("Error:")
        console.log(error)
      });

  }, [])

  return (
    <div className="pageDiv">
      <h2>Results</h2>
    </div>
  );
}

可选：简化后端CORS配置 #

如果修改后仍有问题，可以简化后端的CORS配置，直接使用默认的cors()中间件（允许所有跨域请求）：

// 替换原有的cors配置
app.use(cors());

额外注意事项 #

• 部署React应用时，建议通过环境变量配置后端接口地址，避免硬编码。例如在项目根目录创建.env文件，添加REACT_APP_API_URL=http://192.168.178.70:30100，前端使用process.env.REACT_APP_API_URL + '/Ergebnisse'发起请求。
• 检查Ubuntu服务器的防火墙设置，确保30100端口对外开放，允许客户端访问。

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