Fetch Response Types: CORS Errors, Opaque Responses and JSON
By Ankit Jain · Updated
Separate fetch network failures, opaque responses, unreadable headers and JSON parsing errors before changing your CORS policy.
A response-format problem is not necessarily a CORS error. First check whether Fetch returned a readable response.
Fetch rejects with a network error
Inspect the browser console and Network panel. A CORS rejection, DNS failure, TLS failure, or blocked connection can all cause Fetch to reject. Use the missing-origin-header guide or preflight guide when the console identifies a CORS check.
Fetch returns an opaque response
mode: "no-cors" does not unlock an API. The resulting opaque response has status 0 and an unreadable body. Use normal CORS mode and configure the server, or call the API through a backend you control.
JSON parsing fails
A readable API error response may contain HTML instead of JSON. Check response.status and response.headers.get("content-type") before calling response.json(). Adding Access-Control-Allow-Headers does not change a response body into JSON.
A response header is missing in JavaScript
DevTools may show a header that Fetch cannot expose. For an otherwise readable response, use Access-Control-Expose-Headers: X-Request-Id to expose that header. See Allow-Headers versus Expose-Headers for the distinction between request permission and response exposure.