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

Grasping the 'no-cors' mode

fetch when used with the mode: 'no-cors' can be deceiving. Why? Because it does allow requests to a different origin, avoiding error message. Yet, it implies an opaque response, meaning JavaScript has no access to the response data including headers and status codes, crippling its utility.

Delving into alternatives

Harnessing CORS proxies

A standard tip is employing a CORS proxy which adds the indispensable Access-Control-Allow-Origin header to the response. Deploy such a lifesaver on platforms like Heroku, prefix your API request with the proxy URL and you're good to go.

//Adding CORS proxy. Like offering the fetch request some "Passport".
fetch('https://your-proxy.com/https://example.com');


Backend to the rescue

A more concrete method is handling CORS on the back-end - a higher level of security with reliability. You can use the cors middleware when working with Express.js, or carry out CORS middleware and route registrations while using Laravel. An alpha solution!

Tools for local testing

For local development, browser extensions like "Allow CORS: Access-Control-Allow-Origin" might be helpful. Mind you! These are not recommended for production.

Reverse proxy to the aid

CORS Anywhere or Just CORS, a class of reverse proxy can offer you an easy-going development experience with no server configuration changes needed. Quite a deal!

Alert to potential walls and ways around

Ensuring protocol uniformity

Make sure the protocol in your API request URLs (http or https) matches with your server configuration. Otherwise, you'll meet cross-origin issue even when your server setup is intact.

Applying reverse proxies cautiously

While setting up a reverse proxy, understanding its impact is essential. They do fix CORS errors but can introduce potential security threats and bring down performance.

Prudence with 'no-cors'

mode: 'no-cors' is best used in Service Workers context for caching assets or analytics/logging information where the response doesn't matter.

Long-term foresight for production

Configuring CORS server-side

Ideally, configure CORS at the server-side for permanent solutions providing higher security by making sure your API access is restricted to the intended clients.

Opting for self-hosted CORS solutions

For finer control, consider self-hosted solutions for handling CORS. Customised to suit your security needs and performance demands.

Integration in application lifecycle

In Vue.js, it's preferable to make fetch requests within the mounted lifecycle hook. For Laravel users, resources like Pete Houston's Medium post can simplify the process.