Comment surmonter la SCRO problème dans ReactJS

Je suis en train de faire un appel d'API par l'intermédiaire d'Axios dans mon Réagir Application.Cependant, Iam se ce de la SCRO problème sur mon navigateur. Je me demande si je peux résoudre ce problème à partir d'un client côté que je n ' avez pas accès à l'API en interne.Ci-joint mon code.

const response = axios({
   method: 'post',
   dataType: 'jsonp',
   url: 'https://awww.api.com',
   data: {
    'appToken':'',
    'request':{ 
        'applicationName':'ddfdf', 
        'userName':'[email protected]', 
        'password':'dfd', 
        'seasonIds':[1521ddfdfd5da02] 
     }
     }
    });
   return{
    type:SHARE_REVIEW,
    payload:'response'
 }
 }

Ci-joint mon WebPack.config.js

module.exports = {

entry: [
'./src/index.js'
 ],
output: {
  path: __dirname,
  publicPath: '/',
  filename: 'bundle.js'
},
module: {
 loaders: [{
  exclude: /node_modules/,
  loader: 'babel',
  query: {
    presets: ['react', 'es2015', 'stage-1']
  }
 },
 { test: /\.json$/, loader: "json-loader"}]
  },
 resolve: {
  extensions: ['', '.js', '.jsx']
 },
devServer: {
historyApiFallback: true,
contentBase: './'
},
node: {
 dns: 'mock',
 net: 'mock'
 },
 };

le serveur doit envoyer des en-têtes appropriés si elle vous autorise à utiliser ses ressources ... donc, fixer côté serveur, seulement, le client ne peut pas contourner la SCRO, car ce serait faire de la SCRO hors de propos

OriginalL'auteur mohan babu | 2017-04-18

7

Le moyen idéal serait d'ajouter le soutien de la SCRO à votre serveur.

Vous pouvez également essayer de séparer les jsonp module. Autant que je sache, axios ne prend pas en charge jsonp. Donc je ne sais pas si la méthode que vous utilisez serait considérée comme un valide jsonp demande.

Il y a un autre hackish contourner le problème de la SCRO. Vous devrez déployer votre code avec un serveur nginx agissant comme un proxy pour votre serveur et votre client.
La chose qui va faire le tour de nous le proxy_pass directive. Configurer votre serveur nginx de telle manière que l'emplacement du bloc de traitement de votre demande particulière sera proxy_pass ou de rediriger votre demande à votre serveur.
La SCRO problèmes se produisent généralement à la suite d'un changement dans le domaine de site web.
Lorsque vous avez un seul proxy servant le visage de votre client et votre serveur, le navigateur est trompé en pensant que le serveur et le client se trouver dans le même domaine. Ergo pas de la SCRO.

Considérer cet exemple.

Votre serveur est my-server.com et votre client est my-client.com
Configurer nginx comme suit:
```
//nginx.conf

upstream server {
    server my-server.com;
}

upstream client {
    server my-client.com;
}

server {
    listen 80;

    server_name my-website.com;
    access_log /path/to/access/log/access.log;
    error_log /path/to/error/log/error.log;

    location / {
        proxy_pass http://client;
    }

    location ~ /server/(?<section>.*) {
        rewrite ^/server/(.*)$ /$1 break;
        proxy_pass http://server;
    }
}
```
Ici my-website.com sera la résultante du nom du site où le code sera accessible (nom du proxy site web).
Une fois que nginx est configuré de cette manière. Vous aurez besoin de modifier les demandes telles que:
- Tous les appels d'API changement de my-server.com/<API-path> à my-website.com/server/<API-path>
Dans le cas où vous n'êtes pas familier avec nginx, je vous conseille de passer par le la documentation.

Pour expliquer ce qui se passe dans la configuration ci-dessus, en bref:
- La upstreams définir les serveurs réels à qui la demande sera redirigé
- La server bloc est utilisé pour définir le comportement réel du serveur nginx.
- Dans le cas où il y a plusieurs serveur bloque l' server_name est utilisé pour identifier le bloc qui va être utilisé pour traiter la demande actuelle.
- La error_log et access_log directives sont utilisées pour définir les emplacements des fichiers journaux (utilisé pour le débogage)
- La location blocs de définir le traitement de différents types de demandes:
  1. Le premier emplacement du bloc de traite toutes les demandes de départ avec / toutes ces requêtes sont redirigées vers le client
  2. L'emplacement du deuxième bloc de traite toutes les demandes de départ avec /server/<API-path>. Nous allons rediriger toutes les demandes sur le serveur.
Remarque: /server ici est utilisé pour distinguer le côté client des requêtes côté serveur demandes. Étant donné que le domaine est le même il n'y a pas d'autre moyen de distinguer les demandes. Gardez à l'esprit il n'y a pas une telle convention, qui vous oblige à ajouter /server dans tous ces cas d'utilisation. Il peut être modifié à n'importe quelle autre chaîne par exemple. /my-server/<API-path>, /abc/<API-path>, etc.

Même si cette technique devrait faire l'affaire, je voudrais vous conseillons vivement d'ajouter le soutien de la SCRO sur le serveur, car c'est le moyen idéal de telles situations doivent être traitées.

Si vous souhaitez éviter de faire tout cela tout en développant vous pouvez par cette extension chrome. Il devrait vous permettre d'effectuer des demandes de domaine au cours du développement.

OriginalL'auteur Nahush Farkande
6

Temporaire de résoudre cette question par chrome plugin appelé la SCRO. Btw serveur d'arrière-plan pour envoyer de bon d'en-tête à l'avant la fin de la demande.

Cela a fonctionné comme un charme. Très utiles si vous voulez juste tester et avoir quelque chose qui fonctionne. J'ai utilisé le Moesif Origine & de la SCRO Changeur de plugin. Il suffit de tourner sur et il fonctionne!

OriginalL'auteur SaJed
2

Une autre façon d'ailleurs @Nahush's réponse, si vous utilisez déjà Express cadre dans le projet, vous pouvez éviter d'utiliser Nginx pour faire du reverse-proxy.

Une façon plus simple est d'utiliser express-http-proxy
1. exécuter npm run build pour créer le bundle.
```
var proxy = require('express-http-proxy');

var app = require('express')();

//define the path of build

var staticFilesPath = path.resolve(__dirname, '..', 'build');

app.use(express.static(staticFilesPath));

app.use('/api/api-server', proxy('www.api-server.com'));
```
Utiliser "/api/api-serveur" de réagir code pour appeler l'API.

Donc, que le navigateur envoie une requête au même hôte qui sera
à l'interne de rediriger la requête vers un autre serveur et le navigateur va sentir qu'Il est à venir à partir de la même origine 😉

OriginalL'auteur niraj

Vous pouvez mettre en place un express serveur proxy à l'aide de http-proxy-middleware de contourner la SCRO:

const express = require('express');
const proxy = require('http-proxy-middleware');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();

app.use(express.static(__dirname));
app.use('/proxy', proxy({
    pathRewrite: {
       '^/proxy/': '/'
    },
    target: 'https://server.com',
    secure: false
}));

app.get('*', (req, res) => {
   res.sendFile(path.resolve(__dirname, 'index.html'));
});

app.listen(port);
console.log('Server started');

De vos réagir application toutes les demandes doivent être envoyées à /proxy d'extrémité et ils seront redirigés vers le serveur.

const URL = `/proxy/${PATH}`;
return axios.get(URL);

Il a travaillé. J'étais confus de la façon d'utiliser le proxy dans mon service et ce des moyens, il a travaillé. Merci!!!!

OriginalL'auteur Harshad Ranganathan

1

la façon la plus simple que j'ai trouvé à partir d'un tutoriel de "TraversyMedia", c'est que
utilisez simplement https://cors-anywhere.herokuapp.com dans "axios" ou "extraire" api
```
https://cors-anywhere.herokuapp.com/{type_your_url_here} 
```
par exemple
```
axios.get(`https://cors-anywhere.herokuapp.com/https://www.api.com/`)
```
et dans votre cas, modifier l'url de
```
url: 'https://cors-anywhere.herokuapp.com/https://www.api.com',
```
saint - # % $ cela a fonctionné! mes jours sont enregistrés, pouvez-vous expliquer ce que c'est?
La SCRO-Partout HerokuApp fournit un proxy qui passe sur notre demande, le long de avec ses en-têtes. vous pouvez en savoir plus sur cors-anywhere.herokuapp.com et pour plus d'explication visite moyen de l'après- medium.com/netscape/...

OriginalL'auteur Manoj Sharma

Vous devez vous connecter pour publier un commentaire.