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

AWS EC2 Instance Connect — A very neat trick

Easy As Insights — Part 6: Improving Power BI User Experience — Dynamic Filtering Using URL…

SwiftUI: Everything is possible if you think like Apple

Micronaut API Gateway using HttpFilter and Consul Service Discovery

Udhaar loan customer care number 07337094238/07319066371

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

Automating Google Drive Uploads With Google Drive API & cURL

Using etckeeper on Gentoo for github

ssh-keygen

SQL Query to calculate Retention without using self-join

C++ — Why can’t a const mutable lambda with an auto& parameter be invoked?