Problem mit CORS und API-Keys im Frontend – Wie kann ich das Shopify-intern lösen?

[user3344x]

Hallo zusammen,

ich habe eine PageFly Custom Page in meinem Shopify-Store erstellt, die API-Aufrufe an einen externen Server (***) sendet. Dabei stoße ich jedoch auf ein CORS-Problem: Der API-Server blockiert die Anfrage, da keine Access-Control-Allow-Origin-Header gesetzt sind. Die Fehlermeldung lautet:

"Access to XMLHttpRequest at '***...' from origin '***' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

Leider habe ich keine Kontrolle über den API-Server, um die entsprechenden Header hinzuzufügen.

Zusätzlich mache ich in meinem Code noch zwei weitere API-Aufrufe, bei denen die API-Keys momentan noch im Frontend liegen, da ich die API-Anfragen von der Seite aus stelle. Mir ist bewusst, dass dies sicherheitstechnisch suboptimal ist, da die Keys leicht einsehbar sind. Momentan befinde ich mich jedoch noch in der Testphase.

Meine Fragen:

1. Gibt es eine Möglichkeit, diese Anfragen Shopify-intern zu handhaben, z.B. durch Nutzung der Shopify-API oder anderer integrierter Lösungen, um das CORS-Problem zu umgehen?
2. Muss ich dafür tatsächlich eine eigene Shopify-App entwickeln, um die API-Aufrufe auf der Serverseite durchzuführen und den API-Key sicher zu verbergen?
3. Gibt es alternative Lösungen, um API-Aufrufe von Shopify aus zu machen, ohne dass ich die Keys im Frontend offenlegen muss?

Für jede Unterstützung oder Hinweise, wie ich dieses Problem effizient in Shopify lösen kann, wäre ich sehr dankbar!

[user3344x]

Hat keiner eine Antwort?