Skip to content

Firefox CORS issue #158

@guenhter

Description

@guenhter

Hi,

when using Firefox and frontend the openai js library (running in the browser), then with firefox there is a CORS issue:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:4010/v1/responses. (Reason: header ‘user-agent’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).

It seems like it has the user-agent included.

I guess the easiest fix would be to change

"Access-Control-Allow-Headers": "Content-Type, Authorization",

to

"Access-Control-Allow-Headers": "*,

What do you think?

Here the simulated html which works with Chrome but not with Firefox

<!DOCTYPE html>
<html>
<head><title>CORS test</title></head>
<body>
  <p>This page is served from <strong id="origin"></strong>.<br>
  Open DevTools → Console to see results or CORS errors.</p>

  <h3>GET /v1/models (no preflight — always works)</h3>
  <pre id="out-get">loading...</pre>

  <h3>POST /v1/responses with <code>User-Agent</code> header (triggers preflight — fails in Firefox)</h3>
  <pre id="out-post">loading...</pre>

  <script>
    document.getElementById("origin").textContent = location.origin;

    // Simple GET — no custom headers, no preflight triggered
    fetch("http://localhost:4010/v1/models")
      .then(r => r.json())
      .then(d => document.getElementById("out-get").textContent = JSON.stringify(d, null, 2))
      .catch(e => document.getElementById("out-get").textContent = "ERROR: " + e);

    // POST with User-Agent — the OpenAI SDK does this.
    // Chrome silently drops User-Agent (forbidden header), so preflight succeeds.
    // Firefox includes it in Access-Control-Request-Headers, AIMock doesn't allow it → CORS block.
    fetch("http://localhost:4010/v1/responses", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "User-Agent": "openai-node/4.x",
      },
      body: JSON.stringify({ model: "gpt-4o", input: "hello", stream: false }),
    })
      .then(r => r.text())
      .then(t => document.getElementById("out-post").textContent = t.slice(0, 300))
      .catch(e => document.getElementById("out-post").textContent = "ERROR: " + e);
  </script>
</body>
</html>

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions