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

Mat

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.
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.
  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
 

Dawosch

Neues Mitglied
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.
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:


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.
Auch hier muss dein Server die CORS Berechtigungen setzen, da die Ports unterschiedlich sind.
Dann sollte diese Vorgehensweise aber klappen.
 

Mat

Mitglied
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
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.


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.
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.
 

Dawosch

Neues Mitglied
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.
 

Mat

Mitglied
Wenn dem so ist, kannst du die Sicherheitseinstellungen in deinem Browser komplett deaktivieren, dann sollte das gehen.
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.

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

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.
Das wäre fast schon ideal. Mit Python oder netcat sollte das ja als Einzeiler möglich sein, ich muss noch schauen wie genau.

Ansonsten wäre es via Javascript (dem Swagger Editor) nicht möglich.
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.
 

Mat

Mitglied
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.

 
Oben Unten