I’m trying to implement 3rd party API and its working on localhost. But after deployment on oxygen server refusing API due to content security policy, Can you please help me to resolve it.
Topic summary
Third‑party API calls work on localhost but are blocked after deployment on Oxygen due to Content Security Policy (CSP) restrictions.
Key points:
- In Oxygen, developers must manage CSP headers themselves. The likely cause is the API’s domain not being allowed by the CSP, so the browser blocks requests.
- Resolution path 1: Update the site’s CSP header to include the third‑party API’s origin (e.g., in connect-src for fetch/XHR; possibly script-src if loading scripts).
- Resolution path 2 (recommended to avoid CSP changes): Move API calls from client‑side to server‑side (e.g., in actions or loaders), then return the needed data to the client.
Resources:
- An example Oxygen + Hydrogen setup is linked for guidance, though it doesn’t provide a direct CSP snippet.
Status:
- No final code sample provided in-thread; actionable options are identified, with a server‑side proxy approach as the latest suggestion.
Hi Lucent,
In Oxygen, you have to take care of Content Security Policy (CSP) headers by yourself. These headers dictate which resources can be loaded by your web application. It’s likely that the 3rd-party API you’re trying to connect to is not listed in your CSP header and is therefore being blocked. To resolve this issue, you need to update your CSP header and add your 3rd-party API there.
Can I have example code please?
We have an example implementation of Oxygen with a Hydrogen store in our docs, if this is helpful?
Because you are doing it client side, you need to call your 3rd party server side, either in action or loader, then you dont need to modify the CSP