Access to fetch at … has been blocked by CORS policy

What it means

A page on one origin (http://localhost:8504) called a server on another (http://127.0.0.1:8502/mcp). Because the request has a JSON body and custom headers, Chromium first sends an OPTIONS preflight. Our TypeScript SDK v2 server did not answer it with CORS headers, so the console showed:

Access to fetch at 'http://127.0.0.1:8502/mcp' from origin 'http://localhost:8504' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

and the page’s fetch rejected with TypeError: Failed to fetch. The server never ran the request.

Only browsers enforce CORS. The same request from Node.js, Python, curl or a desktop client works.

The server sends no CORS headers

Neither SDK added CORS headers in our tests: both the TypeScript v2 server and the Python 2.3.0 server answered the OPTIONS preflight with 405 Method Not Allowed and no Access-Control-* headers. If a browser must call the server directly, answer the preflight and the real request with headers like these:

Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Headers: content-type, accept, mcp-protocol-version, mcp-method, mcp-name, authorization

Name the origin; do not use * on a server that holds user data. The Origin check must allow the same origin.

Often the simpler design is to keep the MCP client on your backend, so the browser only talks to your own API.

The MCP headers are not allowed

If the preflight answers but the console says a request header “is not allowed by Access-Control-Allow-Headers”, add the missing header to the list. 2026-07-28 clients send MCP-Protocol-Version, Mcp-Method and, for tools/call, resources/read and prompts/get, Mcp-Name. Tools can also declare Mcp-Param-* headers.

Related

• Invalid Origin
• Transports