Ubuntu Web 服务器上的跨源请求被阻止，无论 Access-Control-Allow-Origin 标头如何

Question

以下问题。我有一个运行 React 应用程序的 Ubuntu Web 服务器。特别是，服务器文件中有两个文件处理网站发出的请求。然而，由于某种原因，无法作为客户端向服务器发出请求。

服务器.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....")
})

结果.js：

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>
  );
}

如果我直接在浏览器中发出请求（http://192.168.178.70:30100/Results）一切正常，因此 server.js 应该可以工作，但是如果网络服务器是源，则请求会被阻止.确切的错误如下所示：

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).

开发工具中的请求如下所示：

我几乎尝试了所有添加 Access-Control-Allow-Origin 标头的方法：

• 你现在在我的代码中看到的方式
• 你现在在我的代码中看到的方式，但有各种可能代表本地主机（'localhost'，'127.0.0.1'，网络服务器的IP地址）
• 在我的app.get中，以

  res.setHeader("Access-Control-Allow-Origin", "localhost");

  的形式 我再次尝试了“*”和“127.0.0.1”

但这些都不适合我。

提前感谢您的时间和帮助:)

Answer 1

我不了解 Node.js，但我想我知道你在这里缺少什么：你没有配置你的服务器来响应预检请求。

基本上，当客户端（Results.js）代码尝试发出 CORS 请求时，浏览器将首先触发预检请求。此请求的目的是验证您的服务器是否支持 CORS 以及它支持哪种方法/来源。

1. 对预检请求的回应：

• 预检请求是与 CORS 请求具有相同 URL 的请求，但 method = OPTION
• 您需要响应带有以下标头的 method = "OPTION" 的任何请求：
  • 访问控制允许来源：*
  • Access-Control-Allow-Methods：您允许该资源使用哪种方法，在您的情况下为“GET”
  • Access-Control-Allow-Headers：您在 CORS 请求中允许哪些标头，如上面的答案：“Origin,X-Requested-With,Content-Type,Accept,content-type,application/json,Authorization”

2. 对主要 CORS 请求的响应：

• 预检请求成功后，浏览器将在 client.js 中触发您的请求。
• 对此请求的响应也需要具有与预检请求相同的标头

注意： 某些浏览器可能需要额外的标头才能接受 CORS 请求。只需阅读控制台日志并向响应添加适当的标头 供您参考：https://fetch.spec.whatwg.org/#http-responses

Answer 2

我曾经遇到过一个问题，主要是 Firefox 浏览器导致的错误。标头、客户端或服务器可能存在问题

解决方案列表

1. 在服务器中设置标头

// set the headers 
app.use(function (req: Request, res: Response, next: NextFunction) {
  res.header("Access-Control-Allow-Origin", "http://localhost:5173");
  res.header("Access-Control-Allow-Credentials", "true");
  res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin,X-Requested-With,Content-Type,Accept,content-type,application/json,Authorization",
  );
  next();
});

// initialize cors 
app.use(cors({ credentials: true, origin: process.env.NODE_ENV !== "http://localhost:5173" : process.env.HOST as string}));

如你所见，我使用了两层设置cors

1. 手动设置标题
2. 使用 cors 中间件。

这在使用 HTTP 客户端时有效，但有时在浏览器中使用它仍然失败

2. 因为您使用的是 axios，所以在客户端中设置标头。

import axios from 'axios';
export const config = {
  baseURL: 'http://localhost:5000',
  withCredentials: 'include',
  timeout: 8000,
  headers: {
    'Content-Type': 'application/json',
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,PATCH,OPTIONS"
  },
};

export const api = create(config);
export default api;

有时浏览器会故意失败您的请求，特别是在处理像PUT请求这样的请求时，因为某些浏览器内置了安全功能。