What is an opaque response, and what purpose does it serve?

cors fetch-api
Miguel Angelo picture Miguel Angelo · Mar 29, 2016 · Viewed 123.4k times · Source

I tried to fetch the URL of an old website, and an error happened:

Fetch API cannot load http://xyz.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://abc' is therefore not allowed access.
If an opaque response serves your needs, set the request's mode to 'no-cors'
to fetch the resource with CORS disabled.

I understood the message, and tried to do a request that returns an opaque response:

fetch("http://xyz", {'mode': 'no-cors'})

Ok, it now works... but I can't read it. =\

What's the purpose then, of an opaque response?

Answer

Salva picture Salva · Mar 30, 2016

Consider the case in which a service worker acts as an agnostic cache. Your only goal is serve the same resources that you would get from the network, but faster. Of course you can't ensure all the resources will be part of your origin (consider libraries served from CDNs, for instance). As the service worker has the potential of altering network responses, you need to guarantee you are not interested in the contents of the response, nor on its headers, nor even on the result. You're only interested on the response as a black box to possibly cache it and serve it faster.

This is what { mode: 'no-cors' } was made for.

Related questions

No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API

I'm trying to fetch some data from the REST API of HP Alm. It works pretty well with a small curl script - I get my data. Now doing that with JavaScript, fetch and ES6 (more or less) seems to …

Read More
Trying to use fetch and pass in mode: no-cors

I can hit this endpoint, http://catfacts-api.appspot.com/api/facts?number=99 via Postman and it returns JSON Additionally I am using create-react-app and would like to avoid setting up any server config. In my client code I am trying …

Read More
Unable to fetch POST without no-cors in header

On making request like that: return fetch( 'http://localhost:8000/login', { method: 'POST', headers: new Headers( {"Content-Type": "application/json", "Accept":"application/json"} ), body: JSON.stringify( {'name': 'Tom', 'password': 'Soyer'} ) } ).then( response => { console.log(response);}) .catch(err => console.log(err)) …

Read More