it-swarm.com.de

Wie kann das CORS-Problem in ReactJS gelöst werden?

Ich versuche einen API-Aufruf über Axios in meiner React-Anwendung zu tätigen. Ich bekomme jedoch dieses CORS-Problem in meinem Browser. Ich frage mich, ob ich dieses Problem von einer Client-Seite lösen kann, da ich keinen Zugriff auf die API intern habe.

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'
 }
 }

Im Anhang ist meine 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'
 },
 };
7
mohan babu

Der ideale Weg wäre, CORS-Unterstützung zu Ihrem Server hinzuzufügen.

Sie können auch versuchen, ein separates jsonp -Modul zu verwenden. Soweit ich weiß, unterstützt Axios Jsonp nicht. Daher bin ich nicht sicher, ob die von Ihnen verwendete Methode als gültige Jsonp-Anforderung qualifiziert ist.

Für das CORS-Problem gibt es noch eine andere harte Arbeit. Sie müssen Ihren Code mit einem Nginx-Server bereitstellen, der als Proxy für Ihren Server und Ihren Client dient. Die Sache, die dazu beitragen wird, ist die proxy_pass-Direktive. Konfigurieren Sie Ihren Nginx-Server so, dass der Standortblock, der Ihre spezielle Anfrage bearbeitet, proxy_pass oder Ihre Anfrage an Ihren tatsächlichen Server umleitet . CORS-Probleme treten normalerweise auf, wenn die Website-Domäne geändert wird Wenn der Proxy als das Gesicht Ihres Clients und Ihres Servers dient, wird der Browser zu der Annahme verleitet, dass sich Server und Client in derselben Domäne befinden. Ergo keine KERN.

Betrachten Sie dieses Beispiel.

Ihr Server ist my-server.com und Ihr Client ist my-client.com Konfigurieren Sie nginx wie folgt:

// 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;
    }
}

Hier wird my-website.com der resultierende Name der Website sein, auf der der Code verfügbar ist (Name der Proxy-Website) . Sobald nginx auf diese Weise konfiguriert ist. Sie müssen die Anforderungen so ändern, dass

  • Alle API-Aufrufe ändern sich von my-server.com/<API-path> in my-website.com/server/<API-path>.

Falls Sie mit nginx nicht vertraut sind, würde ich Ihnen raten, die Dokumentation durchzugehen.

Um zu erklären, was in der obigen Konfiguration passiert, kurz:

  • Die Variable upstreams definiert die tatsächlichen Server, an die die Anforderungen umgeleitet werden
  • Mit dem server-Block wird das tatsächliche Verhalten des nginx-Servers definiert.
  • Falls mehrere Serverblöcke vorhanden sind, wird mit server_name der Block identifiziert, der zur Bearbeitung der aktuellen Anforderung verwendet wird. 
  • Die Anweisungen error_log und access_log werden zum Definieren der Speicherorte der Protokolldateien verwendet (zum Debuggen verwendet).
  • Die location-Blöcke definieren die Behandlung verschiedener Arten von Anforderungen:
    1. Der erste Standortblock verarbeitet alle Anforderungen, die mit / beginnen. Alle diese Anforderungen werden an den Client umgeleitet
    2. Der zweite Standortblock behandelt alle Anforderungen, die mit /server/<API-path> beginnen. Wir leiten alle derartigen Anfragen an den Server weiter.

Hinweis: /server wird hier verwendet, um die clientseitigen Anforderungen von den serverseitigen Anforderungen zu unterscheiden. Da die Domäne identisch ist, gibt es keine andere Möglichkeit, Anforderungen zu unterscheiden. Denken Sie daran, dass es keine solche Konvention gibt, die Sie zwingt, in all diesen Anwendungsfällen /server hinzuzufügen. Es kann zu jeder anderen Zeichenfolge geändert werden, z. /my-server/<API-path>, /abc/<API-path> usw.

Auch wenn diese Technik den Trick ausführen sollte, würde ich Ihnen dringend empfehlen, dem Server die CORS-Unterstützung hinzuzufügen, da dies die ideale Art und Weise ist, wie diese Situationen behandelt werden sollten.

Wenn Sie dies während der Entwicklung vermeiden möchten, können Sie die Erweiterung this chrome verwenden. Es sollte Ihnen ermöglichen, domänenübergreifende Anforderungen während der Entwicklung auszuführen.

7
Nahush Farkande

Lösen Sie dieses Problem vorübergehend durch ein Chrome-Plugin namens CORS. Btw-Backend-Server müssen einen richtigen Header an Frontend-Anforderungen senden. 

6
SaJed

Eine andere Möglichkeit als die Antwort von @ Nahush. Wenn Sie bereits Express-Framework im Projekt verwenden, können Sie die Verwendung von Nginx für Reverse-Proxy vermeiden.

Ein einfacherer Weg ist die Verwendung von express-http-proxy

  1. führen Sie npm run build aus, um das Bundle zu erstellen.

    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'));
    

Verwenden Sie "/ api/api-server" aus dem Reaktionscode, um die API aufzurufen. 

Dieser Browser sendet also eine Anfrage an denselben Host, die .__ sein wird. Interne Umleitung der Anfrage an einen anderen Server und der Browser hat das Gefühl, dass sie vom selben Ursprung stammt;)

2
niraj

Sie können einen Express-Proxy-Server mit http-proxy-middleware einrichten, um CORS zu umgehen:

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');

Von Ihrer Reaktions-App sollten alle Anforderungen an den / proxy -Endpunkt gesendet und an den vorgesehenen Server weitergeleitet werden.

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

der einfachste Weg, den ich in einem Tutorial von "TraversyMedia" gefunden habe, ist, dass Verwenden Sie einfach https://cors-anywhere.herokuapp.com in 'axios' oder 'fetch'

https://cors-anywhere.herokuapp.com/{type_your_url_here} 

z.B.

axios.get(`https://cors-anywhere.herokuapp.com/https://www.api.com/`)

und in Ihrem Fall bearbeiten Sie URL als 

url: 'https://cors-anywhere.herokuapp.com/https://www.api.com',
0
Manoj Sharma