Cors issue with node js and React Js

Question

I have tried all solutions, but doesn't work, and i don't have any idea how i can do to solve this problem

Access to XMLHttpRequest at 'https://api.bolaosolidario.com.br/afiliado/' from origin 'https://app.bolaosolidario.com.br' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I tried to reinstall cors, change my nginx configuration, change my cors in my api configuration, but doesn't work. The cors issue, occurs after a while that the user already has the site open, and i don't know what can cause this, my server configuration:

const express = require('express')
const routes = require('./routers')
const cors = require('cors')
const app = express();
require("dotenv").config();
require('./database')
/*const corsOptions = {
    origin: '*',
    methods: ['GET, HEAD, PUT, PATCH, POST, DELETE, OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With', 'device-remember-token', 'Access-Control-Allow-Origin', 'Origin', 'Accept', ' Access-Control-Allow-Headers' , 'Access-Control-Allow-Methods'],
    optionSuccessStatus: 200,
};*/

app.use(cors())
app.use(express.json())
app.use(routes)
app.use(express.static('public'));
app.use('/images', express.static('images'));
app.listen(process.env.PORT)

I tried with two ways, i tried to use de cors options and a tried to use just the cors, but both configurations give me the same error.

my nginx configuration

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name api.bolaosolidario.com.br;
    root /home/forge/api.bolaosolidario.com.br/dist;
    
     # FORGE SSL (DO NOT REMOVE!)
    ssl_certificate /etc/nginx/ssl/api.bolaosolidario.com.br/1377016/server.crt;
    ssl_certificate_key /etc/nginx/ssl/api.bolaosolidario.com.br/1377016/server.key;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers off;
    ssl_dhparam /etc/nginx/dhparams.pem;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";
    #add_header Access-Control-Allow-Origin *;
    #add_header Access-Control-Allow-Headers "Authorization";
    #add_header Access-Control-Allow-Headers "content-type";
    #add_header Access-Control-Allow-Headers "Access-Control-Allow-Origin";

    index index.html index.htm index.nginx-debian.html;

    # FORGE CONFIG (DO NOT REMOVE!)
    include forge-conf/api.bolaosolidario.com.br/server/*;

    location / {
        proxy_pass http://localhost:8080; # Port number of node http server
        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;
        proxy_set_header 'Access-Control-Allow-Origin' '*';
        proxy_set_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PATCH, DELETE, UPDATE';
    }

    access_log off;
    error_log  /var/log/nginx/api.bolaosolidario.com.br-error.log error;



}

And i have tried to use without the cors, but return the same error, in different routers.

Answer 1

to use CORS, you can use the express direct method like this :

const express = require('express')

const app = express();

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

It works for me, I think it could solve your problem. Nginx doesn't need any particular configuration to work with CORS, the basic one or the one generated by certbot works correctly

Answer 2

To enable the origins you want with cors you can try this

For one allowed origin :

app.use(cors({
  origin: 'https://app.bolaosolidario.com.br'
}))

For several allowed origins :

var allowedOrigins = ['http://localhost:3000','https://app.bolaosolidario.com.br', ...];
app.use(cors({
  origin: function(origin, callback){ 
    if(allowedOrigins.indexOf(origin) === -1){
      var msg = 'CORS error message';
      return callback(new Error(msg), false);
    }    
    return callback(null, true);
  }
}));