CORS: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3000&#03-CodePudding

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

}

Edit: This is the output from a different browser (safari)

CodePudding user response：

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

CodePudding user response：

var corsOptions = {
    origin: "http://localhost:3001",
    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();
});