How to Temporarily Resolve CORS Error in the Console

You may have exhausted all solutions to make your site render on the browser but nothing seems to work. Then, you’ve checked the developer tools console only to get an error saying that CORS is blocking your API requests. A preflight request error on the console. Fig. 1 You’ve probably scoured the internet & found possible solutions to the problem only to find out they don’t work for you. For instance, you may have done these: - Enabled Google Chrome CORS extension - Disabled web security of the browser by changing the file path in the Target property - Installed CORS package & re-writing your JavaScript code to suit it - Endless changing of the specific API you’d use - Changing the API endpoints endlessly too - A rabbit hole of more readings, forum discussions & videos If this sounds like you, then you’re reading the right article! This article will delve into a simple & temporary fix for this problem. You will need: - Windows OS (I’m sure the steps may be similar for other OS but uses OS specific commands) - Windows Command Prompt (CMD) - This list of Windows CMD Commands Open Windows CMD Step 1: Open the Windows command prompt. The Windows CMD Fig. 2 Step 2: Navigate out to the C:// drive Similar to Linux commands for navigating to or out of a folder, navigate to C:// drive. Navigate to drive using the command Fig. 3 C:// cd Step 3: Navigate to the file path where the ‘chrome.exe’ executable file exists There are two possible file paths for this. You will need to navigate to the folder where it exists: C:\Program Files (x86)\Google\Chrome\Application 1st file path: C:\Program Files\Google\Chrome\Application 2nd file path: On my machine, it exists in the as seen below. 1st file path Navigate to the folder where is using the command. command is to list all files & folders in the current directory you’re in Fig. 4 chrome.exe cd dir Step 4: Disable web security on a new instance of the Google Chrome browser Use the command below to disable web security. Command: chrome.exe --user-data-dir=”C:/Chrome dev session” --disable-web-security It simply creates a new unsecured window (instance) for Google Chrome. Rest assured that only this newly created instance/window of Chrome is unsecured. Any other open windows of Chrome are still secure & not affected by this disabling. Using the command in the prompt automatically creates a new unsecured window for Chrome. This doesn’t affect all other open Chrome browsers. Fig 5 The newly created window. Notice in the red border that it notifies you that it’s an unsecure instance Fig 6 Step 5: Use the browser to see your site & to temporarily resolve the CORS issue Whether you’re deploying your site using a live server extension in VSCode, localhost URL when using webpack, or maybe a live demo version, just paste that URL in the browser (where it’s supposed to be) and you’re done! You’ll see the site render on the page & the CORS issue is resolved for now so you can get back to coding. I hope this helps you out if you’re encountering this problem & the process is not tiresome. You can further explore this solution which helped me. A wonderful explanation of CORS can also be found in this . here video Thanks for making it through this article & I hope you’ve also enjoyed it. Follow the steps of this article diligently, then you’ll be fine. Feel free to reach out to me for suggestions or comments & please share this article with those who might need it! You can find me on & . GitHub LinkedIn This article is also published on . Medium