Geek Culture
Published in

Geek Culture

Bypassing CORS with a Google Chrome extension

I’ve never had a CORS-related issue until just recently when I was working with JavaScript. Then again, I haven’t dealt much with CORS in general.

My only recollection of even bumping into the subject was by exploring the Gemfile in past Ruby projects. I think it comes with the initial Ruby on Rails API build but I’m not 100% sure at the moment. Either way, gems are pretty easy to add-on.

Simply add gem ‘rack-cors'to the Gemfile and run a bundle installon the command line.

Cross-Origin Resource Sharing (CORS)

“an HTTP-header based mechanism that allows a server to indicate any other origins (domain, scheme, or port) than its own from which a browser should permit loading of resources” -MDN

The most common situation is when 1 domain/app/website makes a request (XMLHttpRequest or Fetch APIs) for data (usually JSON) to another domain/app/website.

“The browser makes a ‘preflight’ request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request.” -MDN

This is all for security purposes like preventing a malicious site from reading another site’s data. It also prevents legitimate access to “public resources”.

A way to get around this is by puting the appropriate information in the ‘header’ and ‘body’ of the request that will determine what data will be exchanged between the 2 origins. if approved, then it goes right on through. If not, then you’ll get an error message.

My First CORS Error Message

Access to fetch at [‘https://some-api.com] from origin ‘null’ 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. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

I’m still not 100% sure what this all means. Does this mean that the API doesn’t allow requests at all? Or, that I just need to add something else to my headers in my request?

Well, I added this to my fetch request header…

Access-Control-Allow-Origin’:’*’

The ‘*’ means to open everything up and basically allow anything. If I knew what to specify, I would then put it there instead.

My Second CORS Error Message

Access to fetch at [‘https://some-api.com] from origin ‘null’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The ‘Access-Control-Allow-Origin’ header contains the invalid value ‘null//undefined’. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Well, it doesn’t like any of my header iterations.

Google Chrome Extension

There seems to be a couple CORS extensions out there but I chose Allow CORS: Access-Control-Allow-Origin.

I played around with the settings on the options page until I got a different error message. Because, that’s part of programming, right?

Allow CORS options page

Switching #4 from ‘ORIGIN’ to ‘*’ got rid of the previous error messages. But, not without a new error message!

My Third Error Message

A 400 error. So, I take it that it won’t process the request due to a client error like syntax or the request routing.

Conclusion

I spent a whole day trying to understand CORS and making requests. This Google Chrome extension seems pretty handy even if it didn’t quite solve all of my problems.

I think I should forget about the API and find another way like Postman to check my requests.

Alas, another day.

Sources

--

--

--

A new tech publication by Start it up (https://medium.com/swlh).

Recommended from Medium

Ruby on Rails Text in CSS3

Ruby on Rails Text in CSS3

[Week 3, February 2022] MEVerse Weekly Report

Rails Generators:

Which Web Scraper Sites Are Recommended For Data Extraction?

How To Obtain Today’s Titanium Spot Prices By API?

Keeping 170 Libraries Up to Date on a Large Scale Android App

Launching Instance On AWS

Here is an example for Kotlin programming language to develop Android app!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jonelle Noelani Yacapin

Jonelle Noelani Yacapin

Certified Sommelier and Flatiron School Software Engineering Grad

More from Medium

CS373 Spring 2022: Maria Gu

A reverse proxy server accepts a request from the client, forwards it to a backend server, and…

2022 (Fed Rate Hike) OXPH — Bailout Plan

CS373 Spring 2022: Hassan A. Khan