CORS：“Access-Control-Allow-Origin”标头的值“http://localhost:3000”不等于提供的来源答案

【问题标题】：CORS: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3000' that is not equal to the supplied originCORS：“Access-Control-Allow-Origin”标头的值“http://localhost:3000”不等于提供的来源
【发布时间】：2022-01-08 00:03:07
【问题描述】：

所以我是 Nginx 的新手，这就是我认为导致我的问题的原因。我尝试在我的app.use(cors(corsOptions)) 中更改原始值，但在浏览器控制台中，它显示相同的错误。这让我相信这是我的 Nginx 配置文件的问题。主应用程序在端口 3000 上运行，这就是发出请求的地方。

Express 后端（localhost:3001）：

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const Blockchain = require("./blockchain");

var corsOptions = {
    origin: "http://localhost:3000",
    optionsSuccessStatus: 200, // For legacy browser support
};

const app = express();
const coin = new Blockchain();

app.use(cors(corsOptions));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.get("/blockchain", function (req, res) {
    res.json(coin);
});

app.listen(port, function () {
    console.log(`Listening on port ${port}...`);
});

/etc/nginx/sites-available/config

server {
        root /var/www/html;
        index index.html index.htm index.nginx-debian.html;

        server_name chalkcoin.io www.chalkcoin.io;

        location / {
                proxy_pass http://localhost:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/chalkcoin.io/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/chalkcoin.io/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server {
    if ($host = www.chalkcoin.io) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    if ($host = chalkcoin.io) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

        listen 80;
        listen [::]:80;

        server_name chalkcoin.io www.chalkcoin.io;
    return 404; # managed by Certbot

}

【问题讨论】：

标签： node.js express nginx next.js cors

【解决方案1】：

如果这只是你的本地 nginx，你可以在你的 nginx 配置中这样做

add_header Access-Control-Allow-Origin *; - 记住不要将它推广到更高的环境

从控制台，您可以运行 fetch 或通过邮递员来查看服务器是否遵守指令并在响应标头中发送访问控制 - 您也可以打开主机 chalkcoin.io 到查看是否正在传递指令 - 如果在特定情况下无法设置指令，nginx 可能会抛出错误

【讨论】：

我将add_header 添加到我的 Nginx 配置文件中，在我的服务器上重新启动了 Nginx，但我仍然遇到同样的错误。然后我尝试在我的 express.js 文件中没有 app.use(cors()) 行，但仍然没有。
当您在浏览器上点击 www.chalkcoin.io 时，您是否看到访问控制来源 - 证明 nginx 正在代理您的请求？
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3001/blockchain. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://localhost:3000’).
不，如果您打开一个新选项卡并转到 www.chalkcoin.io，您是否看到文档或其他资源返回访问控制来源为 * 以及我在上面发布的 nginx 更改。在您的应用程序之外，您要求请求的资源允许来自您的本地主机的请求，因此他们需要将您作为可接受的请求来源发回。

【解决方案2】：

var corsOptions = {
    origin: "http://chalkcoin.io",
    optionsSuccessStatus: 200, // For legacy browser support
};

如果这个 cors 不起作用，请尝试这个中间件，避免在自定义中间件下实现 cors

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Methods",
    "OPTIONS, GET, POST, PUT, PATCH, DELETE"
  );
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next();
});

【讨论】：

我也在我的 express 文件中尝试过这个，我得到了同样的错误。我切换到 Safari 看看是否有不同的输出，并将结果放在上面的帖子中。

【解决方案3】：

我解决了 Firefox 和 Chrome 的问题，但 Safari 仍然给我带来麻烦。因此 Firefox 和 Chrome 错误是 CORS 标头不等于提供的值。我如何解决这个问题是通过将 axios.get 中的字符串插值更改为常规字符串。并在 express 应用文件中添加了 CORS 选项。

const getNode1 = "http://localhost:3001/blockchain";
const res = await axios.get(getNode1);

const corsOptions = {
    optionsSuccessStatus: 200, // For legacy browser support
    credentials: true, // This is important.
    origin: "https://chalkcoin.io",
};

const app = express();

app.use(cors(corsOptions));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

我相信字符串插值语法会导致此错误，因为 CORS 不能接受通配符。

【讨论】：