Swagger-Editor: Wie kann ich CORS-Einschränkungen umgehen?

Mat

Mat

Aktives Mitglied
Ich möchte eine vorhandene REST-Schnittstelle als OpenAPI-YAML dokumentieren. Dafür benutze ich den Swagger-Editor (online oder lokal), weil der Interaktivität bietet. Allerdings werden die Aufrufe wegen "Cross Origin" abgeblockt.

Access to fetch at 'http://localhost:12345/' from origin 'https://editor.swagger.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Zum Vergrößern anklicken....

Ich verstehe die Meldung nicht. Die liest sich so, als bräuchte ich Kontrolle über die Konfiguration des Online-Editors.
Andere REST-Clients und REST-Plugins für Browser haben auch keine Probleme damit und die benutzen ebenfalls Ajax.

Was ist da jetzt die Lösung?
  1. Swagger-Editor aus Github ziehen und mit spezieller Konfiguration selbst starten?
    1. In der default-Konfiguration sieht das erstmal genauso aus:
    2. Access to fetch at 'http://localhost:12345/index.html' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
      Zum Vergrößern anklicken....
  2. Leichtgewichtigen Proxy ausführen?
    1. Ist das was, was netcat schaffen könnte?
  3. Kann man in der YAML die Art der Request dahingehend verändern, dass es klappt?
    1. Hatte bei der Suche in der OpenApi-Doku erstmal nichts gefunden, was darauf hinweisen würde
    2. Bei der Swagger-Doku wurde ich auch noch nicht fündig

Zum selber testen:

  1. index.html lokal auf port 12345 hosten
  2. YAML in https://editor.swagger.io reinkopieren
  3. Requests durchführen

index.html:
HTML: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hallo</title>
</head>

<body>
    <p>Hello World!</p>
</body>

</html>

OpenApi-YAML:
YAML: 
openapi: 3.0.1
info:
  title: Test
  description: Test
  version: 1.0.0
servers:
  - url: 'http://localhost:12345'
paths:
 
  "/":
    summary: TEST
    get:
      responses:
        200:
          description: "OK"
          content:
           text/html:
              schema:
                type: string
 
  "/index.html":
    summary: TEST
    get:
      responses:
        200:
          description: "OK"
          content:
           text/html:
              schema:
                type: string
 
Access to fetch at 'http://localhost:12345/' from origin 'https://editor.swagger.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Zum Vergrößern anklicken....

Die Seite https://editor.swagger.io ist nicht berechtigt auf den Server http://localhost:12345/ zuzugreifen, weil die Sicherheitseinstellungen im Browser das verhindern (CORS Berechtigung).
Dein Server unter localhost muss also explizit den Zugriff erlauben.
Wenn du den Server z.B. via ExpressJS erstellt hast, kannst du folgendes Modul benutzen:

Express cors middleware

expressjs.com expressjs.com


Zudem würde ich meinen das swagger.io nicht auf localhost:12345 zugreifen kann bzw. nicht auf deinen Server kommt.
Du könntest localhost durch deine WAN IP ersetzen (wieistmeineip.de) und den Port freigeben.


PS:
Access to fetch at 'http://localhost:12345/index.html' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Zum Vergrößern anklicken....

Auch hier muss dein Server die CORS Berechtigungen setzen, da die Ports unterschiedlich sind.
Dann sollte diese Vorgehensweise aber klappen.
 
Dawosch schrieb:
Zudem würde ich meinen das swagger.io nicht auf localhost:12345 zugreifen kann bzw. nicht auf deinen Server kommt.
Du könntest localhost durch deine WAN IP ersetzen (wieistmeineip.de) und den Port freigeben
Zum Vergrößern anklicken....

Entschuldige, das Detail hatte ich vergessen zu erwähnen, weil es schon spät war:
Der Aufruf wird vom Client (Browser) aus ausgeführt und hat Zugang zu allen Netzwerkressourcen, zu denen mein Browser auch Zugang hat. Ich habe das bereits mit einem eigenen lokalen Server getestet, der CORS für alle erlaubt und auch mit einem der CORS nur für editor.swagger.io erlaubt. Hat beides einwandfrei funktioniert.


Dawosch schrieb:
Die Seite https://editor.swagger.io ist nicht berechtigt auf den Server http://localhost:12345/ zuzugreifen, weil die Sicherheitseinstellungen im Browser das verhindern (CORS Berechtigung).
Dein Server unter localhost muss also explizit den Zugriff erlauben.
Wenn du den Server z.B. via ExpressJS erstellt hast, kannst du folgendes Modul benutzen:
[...]
Auch hier muss dein Server die CORS Berechtigungen setzen, da die Ports unterschiedlich sind.
Dann sollte diese Vorgehensweise aber klappen.
Zum Vergrößern anklicken....
Ging vielleicht nicht ganz aus meinem 1. Posting hervor: Ich habe keine Kontrolle über den Code des Zielservers. Meine Codeschnipsel dienten nur zur Reproduktion des Problems, ohne gegen eine echte Live-Seite testen zu müssen. Das im Beispiel ist einfach nur php -S 0.0.0.0:12345 ./index.html mit Standardkonfiguration. Der echte Zielserver läuft glaube ich auf Python, aber verwendet ein Framework. Deswegen ist da auch standardmäßig CORS restriktiv konfiguriert.
 
Du hast also keinen Zugriff auf den eigentlichen Webserver?
Wenn dem so ist, kannst du die Sicherheitseinstellungen in deinem Browser komplett deaktivieren, dann sollte das gehen.

Ansonsten wäre es via Javascript (dem Swagger Editor) nicht möglich.
Evtl. nur wenn du eine Art "Proxy" davorschaltest, der die Javascript Requests entgegennimmt und einen identischen Request via CURL, PHP, Python oder was auch immer auslöst.

Wobei:
Evtl. gibt es eine Swagger Implementierung für NodeJS.
NodeJS selbst kann Requests an an Webserver senden und empfangen ohne CORS Berechtigungen.
 
Dawosch schrieb:
Wenn dem so ist, kannst du die Sicherheitseinstellungen in deinem Browser komplett deaktivieren, dann sollte das gehen.
Zum Vergrößern anklicken....
Ich hab Internet Explorer leider nicht installiert, sonst könnte ich das schnell testen :D
Hmm.. wenn das funktionieren sollte, muss ich nur noch herausfinden, welche Einstellung das genau ist.

Dawosch schrieb:
Evtl. gibt es eine Swagger Implementierung für NodeJS.
NodeJS selbst kann Requests an an Webserver senden und empfangen ohne CORS Berechtigungen.
Zum Vergrößern anklicken....
Die NodeJS-Route ist eine Möglichkeit.. dann könnte ich eine veränderte Version vom swagger-Editor lokal laufen lassen.

Dawosch schrieb:
Evtl. nur wenn du eine Art "Proxy" davorschaltest, der die Javascript Requests entgegennimmt und einen identischen Request via CURL, PHP, Python oder was auch immer auslöst.
Zum Vergrößern anklicken....
Das wäre fast schon ideal. Mit Python oder netcat sollte das ja als Einzeiler möglich sein, ich muss noch schauen wie genau.

Dawosch schrieb:
Ansonsten wäre es via Javascript (dem Swagger Editor) nicht möglich.
Zum Vergrößern anklicken....
Dann frage ich mich, wie zum Beispiel Browser-Extensions das machen.

Zum Beispiel RESTED in Firefox und Chrome:
1589882061889.png

Dachte immer, Extensions seien auch nur JS. Haben die Extensions Zugriff auf die HTTP-API des Browsers oder sowas?

Ich schaue mir grad den Quellcode von RESTED an, aber hab die Magie leider noch nicht gefunden. Also ich vermute window.browser.webRequest, aber bin mir nicht sicher.
 
Update: Habe das jetzt für den Entwicklungsprozess erst einmal über einen Proxy in Java gelöst. Da es sowieso nur dem bequemeren Erkunden und Dokumentieren der Schnittstelle dient, reicht das als Lösung. Kommt ja auch später weg.

Danke auf jeden Fall für deine Hilfe. Habe gelernt, dass Browserplugins anscheinend über Javascript Zugriff auf die websockets der Browser haben. Deswegen funktioniert das bei denen und beim swagger-Editor nicht.

developer.mozilla.org

webRequest - Mozilla | MDN

Add event listeners for the various stages of making an HTTP request, which includes websocket requests on ws:// and wss://. The event listener receives detailed information about the request and can modify or cancel the request.
developer.mozilla.org developer.mozilla.org
 
Zurück
Oben Unten