Problema cors su nginx

di
morenog
il
5 risposte
M
morenog
Pochi posts
Iscritto da
giu, 2022
Messaggi:
27

Problema cors su nginx

Grazie anticipatamente a chi cerca di darmi una mano.

Ho sviluppato per una onlus locale una web application SPA utilizzando i seguenti framework

- Frontend: Angular

- Backend: nodejs

- Database: Mysql

Sono in fase avanzata di sviluppo e stavo pensando di mettere in test l'applicazione. Mi sono creato una VPS su AWS utilizzando un server ubuntu 22.04. Nell'istanza ho creato in /var/www/ una cartella yellowFlag che deve contenere il codice della mia applicazione sia per la parte backend che della parte frontend. La cartella YellowFlag ha due sottocartelle rispettivamente “frontend” per contenere la build e “backend” per contenere i sorgenti della parte backend che ho sviluppato in Visual Studio Code.

Ho effettuato la build su Visual Studio Code della parte Frontend e ho copiato con filezilla il contenuto della cartella “frontend”

Ho copiato sempre con filezilla  i sorgenti sulla catella “backend”

Spero di aver spiegato, la struttura dei miei dati sull'istanza AWS

premetto che ho effettuato nella creazione dell'istanza tutti i passi di configurazione e precisamente

- Installazione mysql e phpmyadmin

- creazione nginx

' creazione server Blocks

il frontend ha il seguente url:  https://bandieragialla.ghisellinimoreno.it

il backend ha il seguente url: https://api,ghisellinimoreno.it

su visual studio code, lato frontend ho definito environment.ts 

export const environment = {
  production: false,
  APIURL: 'https://api.ghisellinimoreno.it',
  APIAUTURL: 'https://api.ghisellinimoreno.it/api/auth/',
  IMGURL: 'https://api.ghisellinimoreno.it/storage/posts/'
};

in backend ho definito la index.js nel seguente modo;

const express = require('express');
const bodyparser = require('body-parser');
const cors = require('cors');
const mysql = require('mysql2');

// porta per mysql
const ports = process.env.PORT || 3001; 

global.__basedir = __dirname;

// importo la connessione al db
const db = require('./db');
// ---------------------------------------------------  importo le rotte
const authRouter = require('./routers/api/auth');
const userRouter = require('./routers/user');
const userlevelRouter = require('./routers/userlevels');
const socioRouter = require('./routers/socio');
const tesseramentoRouter = require('./routers/tesseramento');
const bandieragiallaRouter = require('./routers/bandieragialla');
const localitaRouter = require('./routers/t-locali');
const sociosearchRouter = require('./routers/sociosearch');
const adesioneconfirmRouter = require('./routers/adesioneConfirm');
const quotatesseraRouter = require('./routers/quotatessera');
const manifRouter = require('./routers/manifestaziones');
const eventoRouter = require('./routers/eventos');
const tipobigliettoRouter = require('./routers/t_tipobigliettos');
const logisticaRouter = require('./routers/logisticas');
const logsettoreRouter = require('./routers/logsettores');
const logfilaRouter = require('./routers/logfilas');
const logfilapostiRouter = require('./routers/logfilapostis');
const eventosettfilapostiRouter = require('./routers/eventosettfilapostis');
const eventopostoRouter = require('./routers/eventopostos');
const eventofilaRouter = require('./routers/eventofilas');
const messageRouter = require('./routers/messages');

const prenoteventoNConfirmRouter = require('./routers/prenoteventoNConfirm');
const prenotazeventoRouter = require('./routers/prenotazevento');
const bigliettoRouter = require('./routers/biglietto');
const prenotazeventomasterConfirmRouter = require('./routers/prenotazeventomasterConfirm');
const cassaRouter = require('./routers/cassa');
const cassamovRouter = require('./routers/cassamov');
const regconfRouter = require('./routers/registerConfirm');
const locandinaRouter = require('./routers/locandina');
const wprenotazeventoRouter = require('./routers/wprenotazevento');
const wprenotazeventomasterRouter = require('./routers/wprenotazeventomaster');

const logpostoRouter = require('./routers/logposto');
const wfileRouter = require('./routers/wfile');
const wsettoriRouter = require('./routers/wsettori');

const workFilaRouter = require('./routers/workFila');
const workSettoreRouter = require('./routers/workSettore');
const eventosettorexxRouter = require('./routers/eventosettore');

// ---------------------------------------------------  importo le rotte  -- tabelle correlate
const ruoloRouter = require('./routers/t-ruolos');
const statouserRouter = require('./routers/t_stato_utentes');
const statomanifRouter = require('./routers/t_stato_manifestaziones')
const statoeventoRouter = require('./routers/t_stato_eventos')
const tagliabigliettoRouter = require('./routers/t_taglia_bigliettos')
const statotagliabigliettoRouter = require('./routers/t_stato_taglia_bigliettos')
const statologisticaRouter = require('./routers/t_stato_logisticas')
const tipologisticaRouter = require('./routers/t_tipo_logisticas')
const statobigliettoRouter = require('./routers/t_stato_bigliettos')
const tipopagamentoRouter = require('./routers/t_tipo_pagamentos')
const wEventoTagliaBigliettoRouter = require('./routers/wEventoTagliaBiglietto')
const comunicatoRouter = require('./routers/comunicato')




// work
const elementoRouter = require('./routers/elementos')


// per upload images
const imageRouter = require('./routers/images');


// per il deploy su heroku o altro hosting   2022/04/06

var corsOptions = {
//  origin: "https://bandieragialla.ghisellinimoreno.it",
   allowedHeaders: ['sessionId', 'Content-Type', 'Authorization'],
   exposedHeaders: ['sessionId'],
   origin: '*',
   methods: ['GET','POST','DELETE','PUT','PATCH'],
   preflightContinue: false
  
 };


const app = express();
// utilizzo i pacchetti
app.use(cors(corsOptions));
app.use(bodyparser.json());
app.use(express.json());

// -----------------------------------------   utilizzo il router

app.use('/api/auth', authRouter);
app.use('/users', userRouter);
app.use('/userlevel', userlevelRouter); 
app.use('/socio', socioRouter);
app.use('/tesseramento', tesseramentoRouter);
app.use('/bangia', bandieragiallaRouter);
app.use('/tlocalita', localitaRouter);
app.use('/sociosearch', sociosearchRouter);
app.use('/adesioneConfirm', adesioneconfirmRouter);
app.use('/quotatessera', quotatesseraRouter);
app.use('/manif', manifRouter);
app.use('/evento', eventoRouter);
app.use('/ttipobiglietto', tipobigliettoRouter);
app.use('/logistica', logisticaRouter);
app.use('/logsettore', logsettoreRouter);
app.use('/logfila', logfilaRouter);
app.use('/logfilaposti', logfilapostiRouter);
app.use('/eventosettfilaposti', eventosettfilapostiRouter);
app.use('/eventoposto', eventopostoRouter);
app.use('/eventofila', eventofilaRouter);
app.use('/eventosettore', eventosettorexxRouter);

app.use('/message', messageRouter);
app.use('/prenoteventoNConfirm', prenoteventoNConfirmRouter);
app.use('/prenotazevento', prenotazeventoRouter);
app.use('/biglietto', bigliettoRouter);
app.use('/prenotazeventomasterConfirm', prenotazeventomasterConfirmRouter);
app.use('/cassa', cassaRouter);
app.use('/cassamov', cassamovRouter);
app.use('/regconf', regconfRouter);
app.use('/locandina', locandinaRouter);
app.use('/wprenotazevento', wprenotazeventoRouter);
app.use('/logposto', logpostoRouter);
app.use('/wfile', wfileRouter);
app.use('/wsettori', wsettoriRouter);

app.use('/workFila', workFilaRouter);
app.use('/workSettore', workSettoreRouter);
app.use('/weventotagliabiglietto', wEventoTagliaBigliettoRouter);
app.use('/wprenotazeventomaster', wprenotazeventomasterRouter);
app.use('/comunicato', comunicatoRouter);


// tabelle correlate
app.use('/truolo', ruoloRouter);
app.use('/tstatoutente', statouserRouter);
app.use('/tstatomanifestazione', statomanifRouter);
app.use('/tstatoevento', statoeventoRouter);
app.use('/ttagliabiglietto', tagliabigliettoRouter);
app.use('/tstatotagliabiglietto', statotagliabigliettoRouter);
app.use('/tstatologistica', statologisticaRouter);
app.use('/ttipologistica', tipologisticaRouter);
app.use('/tstatobiglietto', statobigliettoRouter);
app.use('/ttipopagamento', tipopagamentoRouter);




// work
app.use('/elemento', elementoRouter);
app.use('/upload', imageRouter);

// ... Va inserito come ultima rotta 
app.use(function(req, res, next){
    //  res.setHeader('Content-Type', 'text/plain');
      res.setHeader('Access-Control-Allow-Origin', '*');
      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
      res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  //    res.status(404).send('La pagina non esiste amico!');
 
      next();
    });
  // vecchia modalità
  /*
  app.listen(3000,() => {
      console.log('Server running');
  });
  */
  
  // nuova modalità
  app.listen(ports,() => {
    console.log(`Server sta girando sulla porta ${ports} -- credenziali aws ses per invio email`);
  });
  
  console.log('index.js');

ho un problema di cors. Evidenzio la diagnostica 

Bloccata richiesta multiorigine (cross-origin): il criterio di corrispondenza dell’origine non consente la lettura della risorsa remota da https://api.ghisellinimoreno.it/evento/getbyActive/Act. Motivo: l’header “authorization” non è consentito a causa dell’header “Access-Control-Allow-Headers” nella risposta CORS preliminare (“preflight”).

Bloccata richiesta multiorigine (cross-origin): il criterio di corrispondenza dell’origine non consente la lettura della risorsa remota da https://api.ghisellinimoreno.it/evento/getbyActive/Act. Motivo: richiesta CORS non riuscita. Codice di stato: (null).

Bloccata richiesta multiorigine (cross-origin): il criterio di corrispondenza dell’origine non consente la lettura della risorsa remota da https://api.ghisellinimoreno.it/tesseramento/gettesserebyAnno/2023. Motivo: l’header “authorization” non è consentito a causa dell’header “Access-Control-Allow-Headers” nella risposta CORS preliminare (“preflight”).

Bloccata richiesta multiorigine (cross-origin): il criterio di corrispondenza dell’origine non consente la lettura della risorsa remota da https://api.ghisellinimoreno.it/manif/getActive/active/1. Motivo: l’header “authorization” non è consentito a causa dell’header “Access-Control-Allow-Headers” nella risposta CORS preliminare (“preflight”).

Bloccata richiesta multiorigine (cross-origin): il criterio di corrispondenza dell’origine non consente la lettura della risorsa remota da https://api.ghisellinimoreno.it/tesseramento/gettesserebyAnno/2023. Motivo: richiesta CORS non riuscita. Codice di stato: (null).

Bloccata richiesta multiorigine (cross-origin): il criterio di corrispondenza dell’origine non consente la lettura della risorsa remota da https://api.ghisellinimoreno.it/manif/getActive/active/1. Motivo: richiesta CORS non riuscita. Codice di stato: (null).

Object { headers: {…}, status: 0, statusText: "Unknown Error", url: "https://api.ghisellinimoreno.it/manif/getActive/active/1", ok: false, name: "HttpErrorResponse", message: "Http failure response for https://api.ghisellinimoreno.it/manif/getActive/active/1: 0 Unknown Error", error: error }
main.js:1:586307
Object { headers: {…}, status: 0, statusText: "Unknown Error", url: "https://api.ghisellinimoreno.it/tesseramento/gettesserebyAnno/2023", ok: false, name: "HttpErrorResponse", message: "Http failure response for https://api.ghisellinimoreno.it/tesseramento/gettesserebyAnno/2023: 0 Unknown Error", error: error }
main.js:1:582289
Object { headers: {…}, status: 0, statusText: "Unknown Error", url: "https://api.ghisellinimoreno.it/evento/getbyActive/Act", ok: false, name: "HttpErrorResponse", message: "Http failure response for https://api.ghisellinimoreno.it/evento/getbyActive/Act: 0 Unknown Error", error: error }
main.js:1:1770277

?

Riuscite a capire come risolvere il problema ?

Ho cercato di spiegare al meglio il problema, ma sono a disposizione per ogni eventuale chiarimento.

Mi scuso se ho sbagliato il forum.

Grazie

Moreno

5 Risposte

  • M
    morenog
    Pochi posts
    Iscritto da
    giu, 2022
    Messaggi:
    27

    Re: Problema cors su nginx

    Mi accorgo ora di aver dimenticato i file per il frontend e backend su

    -/etc/nginx/sites-available/frontend   e  /etc/nginx/sites-available/backend

    /etc/nginx/sites-available/backend

    
server {

       #listen 80;
       listen 443 ssl; # managed by Certbot
       ssl_certificate /etc/letsencrypt/live/api.ghisellinimoreno.it/fullchain.pem; # managed by Certbot
       ssl_certificate_key /etc/letsencrypt/live/api.ghisellinimoreno.it/privkey.pem; # managed by Certbot
       include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
       ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbo

        server_name api.ghisellinimoreno.it;


        location / {
          # reserve proxy
          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_set_header x-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header x-Forwarded-Host $host:$server_port;
          proxy_cache_bypass $http_upgrade;

          add_header "Access-Control-Allow-Origin" *;
          add_header "Access-Control-Allow-Credentials" "true";
          add_header "Access-Control-Allow-Methods" "GET, POST, PUT, DELETE, OPTIONS";
          add_header "Access-Control-Allow-Headers" "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range";
   
       }

}

    /etc/nginx/sites-available/frontend

    server {
       # listen [::]:80;

        root /var/www/yellowFlag/frontend;
        index index.html;

        server_name bandieragialla.ghisellinimoreno.it;

        location / {
               #try_files $uri $uri/ =404;
                try_files $uri $uri/ /index.html?/$request_uri;
        }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/bandieragialla.ghisellinimoreno.it/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/bandieragialla.ghisellinimoreno.it/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 = bandieragialla.ghisellinimoreno.it) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80;

        server_name bandieragialla.ghisellinimoreno.it;
    return 404; # managed by Certbot


}

    Grazie

    Moreno

  • S
    SpiritoLibero
    Utente Attivo
    Iscritto da
    lug, 2018
    Messaggi:
    269

    Re: Problema cors su nginx

    09/07/2023 - morenog ha scritto:

    add_header "Access-Control-Allow-Headers" "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range";

    Così, ad occhio, nel Access-Control-Allow-Headers devi aggiungere l'header Authorization, che evidentemente (e giustamente) stai trasmettendo.

  • M
    morenog
    Pochi posts
    Iscritto da
    giu, 2022
    Messaggi:
    27

    Re: Problema cors su nginx

    Grazie Spirito Libero per il suggerimento.

    Ho provveduto a modificare lo scrypt e il risultato su /etc/nginx/sites-available/backend è il seguente

    testato il codice su chrome, con attivo il return 200 non va in errore CORS, ma non ritorna nessun dato da mysql

    avrei altri screenshot da allegare, ma mi da errore e non importa.

    come posso fare per allegarli tutti e rendere più visibile la problematica ?

    se inibisco il return 200 viene riproposto l'errore CORS nonostante che sia stato attivato il parametro Authorization sulla scheda Access-Control-Allow_Headers

    Grazie

    Moreno

  • M
    morenog
    Pochi posts
    Iscritto da
    giu, 2022
    Messaggi:
    27

    Re: Problema cors su nginx

    Pensavo di aver trovato l'errore al problema, ma penso di avere ancora qualcosa che non va.

    Mi ero accorto di aver messo i filtri per il cors sia su nginx che su nodejs. Mi spiego meglio

    su /etc/var/sites-available/backend (è il block server del backend) avevo messo le schede “add_header” (vedi screen shot)

    su   /var/www/backend/html             index.js avevo anche qui definito i parametri in “corsOptions”

    Questa doppia definizione sicuramente creava problemi.

    Ho tolto le schede “add_header” da nginx (vedi screenshot)

    e la situazione sembrava corretta.

    Ora ho rilanciato l'istanza, ma vedo che da ancora errori di CORS.

    Che cosa manca ancora o che non ho ben definito ?

    Grazie

    Moreno

  • M
    morenog
    Pochi posts
    Iscritto da
    giu, 2022
    Messaggi:
    27

    Re: Problema cors su nginx

    Non riesco ad uscire da questo diabolico problema CORS.

    Sto cercando di vedere come sono impostati i parametri di my.cnf perchè ho il dubbio che la segnalazione di errore cors possa essere non corretta, ma figlia di errori di a,ltro tipo.

    Non riesco a trovare il file my.cnf , per intenderci quello che in locale su xampp lo trovo come my.ini

    Vorrei vedere come sono impostati i campi dell'utente  e della password.

    Ma non riesco a trovarlo.

    Sto impazzendo su questo errore CORS che esce con il motivo “header CORS “Access-Control-Allow-Origin” mancante. Codice di stato: 502.”

    mentre nella index.js specifico esattamente il file origine

    ecco i parametri corsOptions su index.js

    Credo di impazzire; non riesco a trovare una spiegazione logica a questo problema.

    Vi prego di aiutarmi; sono fermo per la messa in test dellìapplicazione per l'associazione non profit.

    grazie

    Moreno

Devi accedere o registrarti per scrivere nel forum
5 risposte