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

React Discussion :

ReactJs Ajax cors-origin


Sujet :

React

  1. #1
    Membre averti
    Avatar de Sparky95
    Homme Profil pro
    Full Stack (web) developer
    Inscrit en
    Décembre 2016
    Messages
    379
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 28
    Localisation : Belgique

    Informations professionnelles :
    Activité : Full Stack (web) developer
    Secteur : Transports

    Informations forums :
    Inscription : Décembre 2016
    Messages : 379
    Points : 358
    Points
    358
    Par défaut ReactJs Ajax cors-origin
    Bonjour,
    Je suis occupé de développer une page web sur un serveur local.
    Lors de mon projet j'essayes de récupérer le json de ce site web https://gx.opera-api.com/api/v1/game...be&language=fr .
    J'obtiens cette erreur
    Access to fetch at 'https://gx.opera-api.com/api/v1/games?country=be&language=fr' from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'chrome://monday' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
    D'après ce que j'ai compris de mes recherches, cors, est une sécurité navigateur permettant de bloquer par default les requêtes ne faisant pas partie du domaine connu.

    J'ai donc essayé comme mis dans l'erreur de passer via l'option no-cors .
    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
    20
    21
    import React, {Component} from 'react';
     
    class App extends Component {
     
        componentDidMount(){
            fetch("https://gx.opera-api.com/api/v1/games?country=be&language=fr", {
                mode:'no-cors'
            })
            .then(response => {
                console.log(response);
            })        
        }
     
        render() {
            return (
                <div className="App" />
            );
        }
    }
     
    export default App;
    J'obtiens donc bien un status 200 maintenant mais je n'arrives malgré tout pas à récupérer le json du site.
    Comment puis-je donc faire?
    Merci d'avance

  2. #2
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2020
    Messages
    36
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2020
    Messages : 36
    Points : 67
    Points
    67
    Par défaut
    Salutations,
    le no-cors ne suffit pas c'est du côté https://gx.opera-api.com/ qu'il faut autoriser la connexion pour des raisons de sécurité.
    Sinon il faut que tu interroges avec un langage côté serveu (Node ?) et que tu transmettes ensuite l'information à ton application React, tu n'auras pas de problème avec tes CORS policy.

    Développeur freelance à Toulouse - site en construction

  3. #3
    Membre averti
    Avatar de Sparky95
    Homme Profil pro
    Full Stack (web) developer
    Inscrit en
    Décembre 2016
    Messages
    379
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 28
    Localisation : Belgique

    Informations professionnelles :
    Activité : Full Stack (web) developer
    Secteur : Transports

    Informations forums :
    Inscription : Décembre 2016
    Messages : 379
    Points : 358
    Points
    358
    Par défaut
    Oui pour le moment je fais une copie du fichier coté serveur et je lis cette copie.

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

Discussions similaires

  1. Réponses: 8
    Dernier message: 30/01/2014, 13h52
  2. Réponses: 5
    Dernier message: 14/01/2013, 21h14
  3. Ext.Ajax et Access-Control-Allow-Origin:*
    Par sebxid dans le forum Ext JS / Sencha
    Réponses: 1
    Dernier message: 22/02/2012, 16h46
  4. CORS + Ajax + Session (avec PHP)
    Par Sergejack dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 28/08/2011, 19h23
  5. Réponses: 4
    Dernier message: 06/11/2007, 15h05

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