Ich versuche, einen Proxy in meiner React-App zu verwenden, aber ich stehe vor dem folgenden Fehler: Ungültiges Optionsobjekt. Dev Server wurde mit einem Optionsobjekt initialisiert, das nicht mit dem API-Schema übereinstimmt in ReagierenJS. In diesem EZerror-Artikel erfahren Sie, wie Sie diesen Fehler reproduzieren können, und wir werden alle möglichen Lösungen besprechen. Beginnen Sie mit diesem Artikel.

Wie Ungültiges Optionsobjekt. Dev Server wurde mit einem Optionsobjekt initialisiert, das nicht mit dem API-Schema übereinstimmt. Fehler tritt auf?

Ich versuche, einen Proxy in meiner React-App zu verwenden, aber ich stehe vor dem folgenden Fehler.

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema

Also schreibe ich hier alle möglichen Lösungen, die ich versucht habe, um diesen Fehler zu beheben.

So lösen Sie ein ungültiges Optionsobjekt. Dev Server wurde mit einem Optionsobjekt initialisiert, das nicht mit dem API-Schema übereinstimmt Fehler?

  1. So lösen Sie ein ungültiges Optionsobjekt. Dev Server wurde mit einem Optionsobjekt initialisiert, das nicht mit dem API-Schema übereinstimmt Fehler?

    So lösen Sie ein ungültiges Optionsobjekt. Dev Server wurde mit einem Optionsobjekt initialisiert, das nicht mit dem API-Schema übereinstimmt Fehler Erstellen Sie zunächst eine .env-Datei und fügen Sie dann die folgende Zeile zu Ihrer .env-Datei hinzu: DANGEROUSLY_DISABLE_HOST_CHECK=wahr Und jetzt fügen Sie Ihren Proxy in Ihrer hinzu Paket.json Datei einfach so: proxy: http://localhost:6000 Und jetzt wird Ihr Fehler behoben. Danke.

  2. Ungültiges Optionsobjekt. Dev Server wurde mit einem Optionsobjekt initialisiert, das nicht mit dem API-Schema übereinstimmt

    So lösen Sie ein ungültiges Optionsobjekt. Dev Server wurde mit einem Optionsobjekt initialisiert, das nicht mit dem API-Schema übereinstimmt Sie müssen das npm-Paket namens verwenden http-Proxy-Middleware. Als erstes installieren http-Proxy-Middleware indem Sie diesen Befehl ausführen: npm http-proxy-middleware installieren – speichern Und dann erstellen src/setupProxy.js Oder Sie können erstellen setupProxy.js an der Wurzel Ihres Projekts. und fügen Sie diesen Code in Ihre hinzu setupProxy.js Jetzt können Sie den Proxy fehlerfrei verwenden. Vielen Dank.

Lösung 1: Verwenden Sie HTTP-Proxy-Middleware

So lösen Sie ein ungültiges Optionsobjekt. Dev Server wurde mit einem Optionsobjekt initialisiert, das nicht mit dem API-Schema übereinstimmt Sie müssen das npm-Paket namens verwenden http-Proxy-Middleware. Als erstes installieren http-Proxy-Middleware indem Sie diesen Befehl ausführen.

npm install http-proxy-middleware --save

Und dann erstellen src/setupProxy.js Oder Sie können erstellen setupProxy.js an der Wurzel Ihres Projekts. und fügen Sie diesen Code in Ihre hinzu setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5555',
      changeOrigin: true,
    })
  );
};

Jetzt können Sie den Proxy fehlerfrei verwenden. Vielen Dank.

Lösung 2: Erstellen Sie eine .env-Datei

Erstellen Sie zunächst eine .env-Datei und fügen Sie dann die folgende Zeile zu Ihrer .env-Datei hinzu.

DANGEROUSLY_DISABLE_HOST_CHECK=true

Und jetzt fügen Sie Ihren Proxy in Ihrer hinzu Paket.json Datei genauso.

"name": "client",
....
"proxy": "http://localhost:6000"

Und jetzt wird Ihr Fehler behoben. Danke.

Lösung 3: Verwenden Sie diesen Befehl

Löschen Sie zunächst Ihren npm-Cache. Durch Ausführen dieses Befehls.

npm cache clean --force

Dann kannst du laufen

npm audit fix --force

Dann löschen node_modules und Paketsperre.json durch Laufen

rm -rf node_modules
rm -rf package-lock.json

Führen Sie dann npm install aus

npm install

Fügen Sie jetzt Proxy in Ihrer hinzu Paket.json genau wie dieser.

"name": "client",
....
"proxy": "http://localhost:6000"

und jetzt können Sie Ihr Projekt ohne Fehler ausführen.

Fazit

Es geht nur um diesen Fehler. Ich hoffe, wir haben Ihren Fehler behoben. Kommentieren Sie unten Ihre Gedanken und Ihre Fragen. Kommentieren Sie auch unten, welche Lösung für Sie funktioniert hat?