J'essaie de passer un appel d'API via Axios dans mon application React. Cependant, je suis en train d'obtenir ce problème CORS sur mon navigateur. Je me demande si je peux résoudre ce problème du côté client car je n’ai aucun accès à l’API en interne. Le code ci-joint est attaché.
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'
},
};
L'idéal serait d'ajouter le support CORS à votre serveur.
Vous pouvez également essayer d’utiliser un module jsonp séparé. Pour autant que je sache, axios ne supporte pas jsonp. Je ne suis donc pas sûr que la méthode que vous utilisez puisse être considérée comme une demande jsonp valide.
Il y a un autre travail astucieux autour du problème de la SCRO. Vous devrez déployer votre code avec un serveur nginx servant de proxy à la fois pour votre serveur et votre client ... La chose qui nous facilitera la tâche avec la directive proxy_pass
. Configurez votre serveur nginx de manière à ce que le bloc d’emplacement traitant votre requête particulière proxy_pass
ou redirige votre requête vers votre serveur actuel . proxy servant de visage à votre client et à votre serveur, le navigateur est trompé en pensant que le serveur et le client résident dans le même domaine. Ergo no CORS.
Considérons cet exemple.
Votre serveur est my-server.com
et votre client est my-client.com
Configurez 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 le nom résultant du site Web où le code sera accessible (nom du site Web proxy) . Une fois que nginx est configuré de cette manière. Vous devrez modifier les demandes de telle sorte que:
my-server.com/<API-path>
à my-website.com/server/<API-path>
Si vous ne connaissez pas nginx, je vous conseillerais de consulter la documentation .
Pour expliquer en bref ce qui se passe dans la configuration ci-dessus:
upstream
s définissent les serveurs réels vers lesquels les demandes seront redirigéesserver
sert à définir le comportement réel du serveur nginx.server_name
est utilisé pour identifier le bloc qui sera utilisé pour gérer la requête en cours. error_log
et access_log
permettent de définir les emplacements des fichiers journaux (utilisés pour le débogage).location
définissent le traitement de différents types de demandes: /
; toutes ces demandes sont redirigées vers le client./server/<API-path>
. Nous allons rediriger toutes ces demandes vers le serveur.Remarque: /server
est utilisé ici pour distinguer les demandes côté client des demandes côté serveur. Le domaine étant le même, il n’ya pas d’autre moyen de distinguer les demandes. Gardez à l'esprit qu'aucune convention de ce type ne vous oblige à ajouter /server
dans tous les cas d'utilisation. Il peut être changé en une autre chaîne, par exemple. /my-server/<API-path>
, /abc/<API-path>
, etc.
Même si cette technique devrait faire l'affaire, je vous conseillerais vivement d'ajouter le support CORS au serveur, car c'est la manière idéale de gérer des situations de ce type.
Si vous souhaitez éviter tout cela pendant le développement, vous pouvez utiliser l'extension this chrome. Cela devrait vous permettre d'effectuer des requêtes entre domaines au cours du développement.
Temporary résoudre ce problème par un plugin chrome appelé CORS. Le serveur principal Btw doit envoyer un en-tête approprié aux demandes frontales.
Une autre solution en plus de la réponse de @ Nahush, si vous utilisez déjà Express Framework dans le projet, vous pouvez éviter d'utiliser Nginx pour le reverse-proxy.
Un moyen plus simple consiste à utiliser express-http-proxy
lancez npm run build
pour créer le paquet.
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'));
Utilisez "/ api/api-server" à partir du code de réaction pour appeler l'API.
Donc, ce navigateur enverra une demande au même hôte qui sera redirige en interne la demande vers un autre serveur et le navigateur sentira qu’elle provient de la même origine;)
Vous pouvez configurer un serveur proxy express en utilisant http-proxy-middleware pour contourner CORS:
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');
À partir de votre application de réaction, toutes les demandes doivent être envoyées à / proxy terminal et elles seront redirigées vers le serveur prévu.
const URL = `/proxy/${PATH}`;
return axios.get(URL);
la façon la plus simple de trouver un tutoriel de "TraversyMedia" est que il suffit d'utiliser https://cors-anywhere.herokuapp.com dans 'axios' ou 'fetch' 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, éditez l'URL comme
url: 'https://cors-anywhere.herokuapp.com/https://www.api.com',