IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

NodeJS Discussion :

Requête CORS - environnement dev et prod


Sujet :

NodeJS

  1. #1
    Membre à l'essai
    Femme Profil pro
    Ressources humaines
    Inscrit en
    juillet 2018
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Ressources humaines
    Secteur : Service public

    Informations forums :
    Inscription : juillet 2018
    Messages : 21
    Points : 15
    Points
    15
    Par défaut Requête CORS - environnement dev et prod
    Bonjour à tous,

    Tout d'abord je remercie tout ceux qui prendront le temps de lire ce message.

    Je développe actuellement une application MEAN stack. J'utilise donc Nodejs pour gérer le backend. J'ai un CORS qui contrôle l'origine des requêtes.
    En local, tout fonctionne correctement.

    Je dois maintenant déployer l'application sur un serveur web (j'utilise NGINX) et c'est la que je rencontre des difficultés.

    Lorsque que je build l'application et que je lance le back, l'application en ligne fonctionne correctement.

    Au bout d'un moment, mon CORS bloque les requête provenant de mon front en prenant pour origin autorisée localhost:4200.
    J'ai supposé que le problème venait du fait que lorsque je retravaille sur le projet en local, le cors reprend localhost:4200 comme origin autorisé, mais je ne comprends pas comment c'est possible puisque mon application est déployée sur un serveur distant.

    Je vous met les bouts de code concernés:
    Mon index back :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    let origin = 'https://nomdomainedemonapp.co'
     
    const options = {
        cors: {
            origin: origin,
            methods: ["GET", "POST"],
            allowedHeaders: ["my-custom-header"],
            credentials: true
        }, allowEIO3: true
    };
    const io = require("socket.io")(server, options);
    Lorsque je travaille en local il s'agit du même code. La seul chose qui change, c'est let origin = 'https://nomdomainedemonapp.co' qui devient let origin = 'http://localhost:4200'

    Les headers:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    app.use((req, res, next) => {
        res.setHeader('Access-Control-Allow-Origin', '*');
        res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization');
        res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
        next();
      });
    Ma configuration nginx:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    location /soc{
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Access-Control-Allow-Origin *;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_pass http://127.0.0.1:3000;
    J'apprends tout ca seule donc il se peut que je ne sois pas dans les bonnes pratiques.

    Par avance un très grand merci

  2. #2
    Membre à l'essai
    Femme Profil pro
    Ressources humaines
    Inscrit en
    juillet 2018
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Ressources humaines
    Secteur : Service public

    Informations forums :
    Inscription : juillet 2018
    Messages : 21
    Points : 15
    Points
    15
    Par défaut Erreur déploiement
    Bonjour,

    J'ai un peu avancé sur le déploiement sur nginx.

    Malheureusement je rencontre à nouveau un problème.

    J'ai donc utilisé un reverse proxy pour pouvoir faire des requetes https redirigées vers mon back.

    Malheureusement je n'arrive pas à modifier mes routes pour qu'elles fonctionnent avec le reverse.

    Peut être que l'erreur est ailleurs

    Je remet le code ci dessous:
    reverse proxy nginx:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
      location /soc/ {
                    root /capza_app/back/;
                    index index.js;
    #               proxy_set_header X-Real-IP;
                    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                    proxy_set_header Host $host;
                    proxy_set_header X-NginX-Proxy true;
                    proxy_set_header AccesControl-Allow-Origin *;
                    proxy_pass http://ip:3000/;
                    proxy_set_header Upgrade $http_upgrade;
                    proxy_set_header Connection "upgrade";
                    proxy_http_version 1.1;
            #       proxy_redirect http://ip:3000/ https://compliance.capza.co;
            }
    Appel de l'api dans mon front:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
     apiUrl = 'https://compliance.capza.co/soc/transaction/'
     
     saveFund(newFund : Fund){
        console.log("nous sommes dans le service de ", newFund)
        let url = this.apiUrl + 'saveFund';
        console.log("front" + url)
        return this.http.post<Fund>(url, newFund, { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })})
      }
    Redirection vers le controlleur dans mon index:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    const TransactionController = require('./controllers/transactionController');
     
    app.use('/user', UserController);
    app.use('/user/saveUser', UserController);
    app.use('/soc/transaction', TransactionController);

    Mon controller:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
     
    app.post('/saveFund', (req, res, next) =>{
     
        const newFund = new Fund({
            fund_s:             req.body.fund_s,
            fund_name:          req.body.fund_name,
            isUBO:              req.body.isUBO,
            isHDD:              req.body.isHDD,
            fund_acquis_date:   req.body.fund_acquis_date,
            fund_sell_date:     req.body.fund_sell_date,
            id_user :           req.body.id_user
        })
     
        console.log(newFund)
     
        newFund.save()
        .then((newFundSave) => res.status(200).json({message : 'Nouvelle fondation ajoutée', data : newFundSave}))
     
    })
    Je présice que tout fonctionne en locale, et tout fonctionne lorsque je déploie sans utiliser de ssl.

    Par avance un très grand merci

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [2014] Environnement Dev. SQL 2014 vs environnement Prod SQL 2008 R2 !
    Par hmira dans le forum Développement
    Réponses: 7
    Dernier message: 20/06/2016, 17h00
  2. Bonnes pratiques Environnements (Dev,Test,Prod)
    Par B.Simo dans le forum Microsoft BI
    Réponses: 0
    Dernier message: 07/11/2013, 16h28
  3. Réponses: 2
    Dernier message: 14/01/2013, 23h28
  4. Changement d'environnement DEV>PROD SSIS 2008
    Par max.64 dans le forum SSIS
    Réponses: 2
    Dernier message: 04/09/2009, 18h08
  5. Environnement de développement, prod et migration.
    Par sharepoint_ba dans le forum SharePoint
    Réponses: 8
    Dernier message: 24/06/2008, 12h20

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo