CODEWITHSUNDEEP
corsfetch-api
Miguel Angelo
Miguel Angelo

Reputation: 24212

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

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?

Upvotes: 233

Views: 169126

Answers (4)

WoJ
WoJ

Reputation: 30044

no-cors helped me once when I wanted to monitor the Internet availability for a Single Page Application. The page needed to access the Internet and I wanted to be informed when it could not (because the network failed or anything else).

I had access to a cloud-based monitoring service that accepted pushes, i.e. you could send an HTTP call to the service and it would alert you if it has not seen a call within X minutes. A heartbeat kind of monitoring.

The problem is that this service was not exposing any CORS headers (it was intended for backend applications) and a fetch from my page would fail.

no-cors to the rescue: with that option I could send my GET request but I did not care about any response. Either it reaches the monitoring service and everything is fine, or it does not and an alert is raised.

Upvotes: 4

Salva
Salva

Reputation: 6855

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.

Upvotes: 187

JeffreyC
JeffreyC

Reputation: 640

There's also solution for Node JS app. CORS Anywhere is a NodeJS proxy which adds CORS headers to the proxied request.

The url to proxy is literally taken from the path, validated and proxied. The protocol part of the proxied URI is optional, and defaults to "http". If port 443 is specified, the protocol defaults to "https".

This package does not put any restrictions on the http methods or headers, except for cookies. Requesting user credentials is disallowed. The app can be configured to require a header for proxying a request, for example to avoid a direct visit from the browser. https://robwu.nl/cors-anywhere.html

Upvotes: 5

Marco Castelluccio
Marco Castelluccio

Reputation: 10802

Opaque responses can't be accessed by JavaScript, but you can still cache them with the Cache API and respond with them in the fetch event handler in a service worker. So they're useful for making your app offline, also for resources that you can't control (e.g. resources on a CDN that doesn't set the CORS headers).

Upvotes: 87

Related Questions