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

Question

So I'm new to Nginx and that's what I think is causing my problem. I have tried changing the origin value in my app.use(cors(corsOptions)) but in the browser console, it says the same error. This makes me believe it's a problem with my Nginx config file. The main app is running on port 3000 and that's where the request is being made from.

Express backend (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

I solved the problem for Firefox and Chrome but Safari is still giving me trouble. So the Firefox and Chrome error was the CORS header wasn't equal to the value supplied. How I solved this was by changing the string interpolation in the axios.get a request to a regular string. And added the CORS options in the express app file.

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

I believe the string interpolation syntax causes this error because CORS can't accept wildcards.

Answer 2

If this is only your local nginx, you can do this in your nginx config

add_header Access-Control-Allow-Origin *; - Remember not to promote this to higher environments

From the console, you can run a fetch or via postman to see if the server is honoring the directive and sending the access control in response headers - you could also open the host chalkcoin.io to see if the diretive is being passed - nginx may throw an error if a directive cannot be set in a particular situation

Answer 3

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

try this middleware if this cors not works avoid cors implementing below custom middleware

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