CORS：'Access-Control-Allow-Origin' header 的值 'http://localhost:3000' 不等于提供的来源

Question

所以我是 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

}

Answer 1

如果这只是您本地的 nginx，您可以在您的 nginx 配置中执行此操作

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

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

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

Answer 3

我解决了 Firefox 和 Chrome 的问题，但 Safari 仍然给我带来麻烦。所以 Firefox 和 Chrome 错误是 CORS header 不等于提供的值。我是如何解决这个问题的，方法是将 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 不能接受通配符。

CORS：'Access-Control-Allow-Origin' header 的值 'http://localhost:3000' 不等于提供的来源

CORS: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3000' that is not equal to the supplied origin

nginx

node.js

cors

express

next.js