CORS 策略，本地主机（chrome 失败，postman.co 工作）

Question

我开发了一份联系表（初学者）。如果我使用 postman.co 它可以工作。如果我使用我的前端，它就不起作用。由于 cors 错误，它失败了，我不明白。据我所知它应该有效，因为我设置了一个标头，允许源请求资源，但 chrome 说没有标头。请查看以下代码段落并帮助我：

前端

async function submitHandler() {
try {
const res = await fetch("http://localhost:5000/Kontakt", {
method: "POST",
mode: "cors",
headers: { "content-type": "application/json" },
body: JSON.stringify(formik.values)
});
console.log(res.message);
if (res.message == "message saved") { formik.resetForm(); navigate("/Bestaetigung"); }
else { navigate("/Fehlgeschlagen"); console.log("fehlgeschlagen1") }
} catch (error) {
navigate("/Fehlgeschlagen");console.error(error);
}};

后端

const express = require("express");
const login_routes = require('./router/registered.js').registered;
const general_routes = require('./router/general.js').general;

const app = express();
app.use(express.json());

const PORT = 5000;
app.use("/", general_routes);
app.listen(PORT,()=\>console.log("Server is running"));

general_users.post("/Kontakt", (req, res) =\> {

    var content = req.body;
    content = JSON.stringify(content)
    
    res.setHeader("Access-Control-Allow-Origin", "http://localhost:5173");
    res.setHeader("Access-Control-Request-Method", "*");
    res.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT");
    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
    fs.appendFile("messages.txt", content, err => {
        if (err) {
            console.error(err);
            return res.status(500).json({error: "message not saved"});
        } else {
            res.status(200).json({message: "message saved"});
        }
    });

});

“Access-Control-Allow-Origin: *”也不起作用。

这就是 chrome 所说的：“从源 'http://localhost:5173' 获取 'http://localhost:5000/Kontakt' 的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。”

我知道代理服务器可以提供帮助，但如果正确的代码已经可以解决问题，我为什么要使用代理。

我尝试了不同的 Chrone 扩展，但它们并没有立即起作用，之后我就失去了动力。然后可以在其快捷方式等中使用几个参数来启动 chrome，但是如果我在 vs code 中使用“npm run dev”（vite），它总是会打开一个新窗口，而不使用启动参数。我搜索了几分钟以寻找免费且快速的代理服务器，但找不到。然后还有与 Heroku 一起使用的代理服务器包。这对我来说也是新鲜事，我就不再追求了。 我只是想知道正确的代码以避免任何支持工具。

Answer 1

这里我们可以找到如何使用cors的示例https://expressjs.com/en/resources/middleware/cors.html

可能对您有帮助的示例之一是：

var express = require('express')
var cors = require('cors')
var app = express()

var allowlist = ['http://example1.com', 'http://example2.com']
var corsOptionsDelegate = function (req, callback) {
  var corsOptions;
  if (allowlist.indexOf(req.header('Origin')) !== -1) {
    corsOptions = { origin: true } // reflect (enable) the requested origin in the CORS response
  } else {
    corsOptions = { origin: false } // disable CORS for this request
  }
  callback(null, corsOptions) // callback expects two parameters: error and options
}

app.get('/products/:id', cors(corsOptionsDelegate), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for an allowed domain.'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})