newsapi.org cors blocked in browser agent, fetch failed

TL;DR

NewsAPI blocks browser-origin requests with CORS because the API key would be exposed in client-side code. Move the call server-side: have the browser agent request through your backend proxy, which holds the key and forwards the response.

The error

Access to fetch at 'https://newsapi.org/v2/everything' from origin 'https://agent.example' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Fix it

1. Confirm the failure is CORS and not the key: run the same request with curl from your server. If curl works, the key is fine and the browser is the problem. Expected: Expected: curl returns 200 with articles, proving the API and key work.

2. Add a backend endpoint (for example /api/news) that accepts the agent's query, calls NewsAPI server-side with the key, and returns the JSON. Expected: Expected: the browser agent calls your endpoint with no CORS error and no exposed key.

3. Update the agent's tool definition to use the proxy endpoint instead of newsapi.org directly. Expected: Expected: the agent's news searches succeed from the browser context.

4. Never put the NewsAPI key in browser-side code or agent prompts; keep it in server environment config only. Expected: Expected: the key stays secret and the CORS problem disappears permanently.

When to use

• Your browser-based agent's NewsAPI calls fail with CORS errors.
• You need news search inside a browser context without leaking the API key.
• You run agent tools that call key-authenticated APIs from the frontend.

When not to use

• curl also fails - then the key or the query is the problem, not CORS.
• You can run the agent server-side - then call NewsAPI directly with no proxy.
• The API you need supports browser keys with origin restrictions - check before building a proxy.

Why it happens

NewsAPI's servers do not send CORS allow-origin headers, which is deliberate: API keys in browser code are visible to anyone. The browser enforces the block. Server-side code is not subject to CORS, so a thin proxy is the intended architecture.

Variant phrasings

newsapi cors policy blocked

Same failure and fix; some searchers phrase the query this way.

newsapi.org access-control-allow-origin missing

Same failure and fix; some searchers phrase the query this way.

Edge cases

• Some agents run in a Node backend but still set an Origin header, triggering preflight; strip it server-side.
• The free tier's local-only restriction is separate from CORS; test from the deployed origin.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_fUFrhXCXSHQwt91xilIToQ