Fix CORS Error (JavaScript)

cigwe416 — Thu, 04 Mar 2021 18:01:42 +0000

What is CORS?

Cross-Origin Resource Sharing (CORS) is 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

This definition might seem confusing so let me try to explain it in simpler terms.

CORS is a browser policy that allows you to make requests from one website to another which by default is not allowed by another browser policy called Same Origin Policy.

This is an error that is mostly addressed from the backend of an API.
The problem here is when you are trying to call a public API without the CORS error being fixed and you can't reach the developers that developed the API.

In this tutorial, I'll be showing you how to by-pass CORS errors using Vanilla Javascript when you are in such a situation.

The API we are going to be using is a Quote Generator API.

http://api.forismatic.com/api/1.0/

In other to get list of Quotes, we need to append this to the base URL

?method=getQuote&lang=en&format=json.

So the full URL becomes;

`http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json`

In other to make the API call, we need to create a Javascript file and call the endpoint.We would be using the fetch API.

This would look like this;



// Get quote from API
async function getQuote() {
  const apiUrl = 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json';
  try {
     const response = await fetch(apiUrl);
     const data = await response.json();
     console.log({data});
  } catch (error) {
     console.log(error);
      }
  }
// On load
getQuote();

If you run this code in your browser and open up your console, you should see the error below;

In other to fix this error, add the following lines of code;



// Get quote from API
async function getQuote() {
  const proxyUrl = 'https://cors-anywhere.herokuapp.com/' -> this line;
  const apiUrl = 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json';
try {

     const response = await fetch(proxyUrl + apiUrl) -> this line;
     const data = await response.json();
     console.log({data});
  } catch (error) {
     console.log(error);
      }
  }
// On load
getQuote();

This URL https://cors-anywhere.herokuapp.com/ is also a public API that was created by someone to fix the CORS error.

N.B: You might still get some errors on your console even after following the steps I just showed.If this happens, go to this URL

   `https://cors-anywhere.herokuapp.com/corsdemo`

and follow the instructions there.

Thanks for taking your time to read this Article. Your feedback and comment is highly welcomed.

Hosting your React Application on Github

cigwe416 — Mon, 01 Mar 2021 17:08:33 +0000

In this article, I'll guide you on how to host your frontend applications using GitHub's free hosting service.

N.B They are other free hosting services like Netlify, Heroku, Vercel, and so on but today, our focus would be using GitHub.

The steps are as follows:
First you need to create a react application and push to Github. In this article, we would be building a simple input element inspired by Google's Material Design.

Create the react application you want to host using the steps below
a. npx create-react-app app-name where app-name is the name of your application. Feel free to choose whatever name you want.
b. Open the application in your preferred code editor. I'll be using vscode.
copy and paste the following code in your App.js file.

<form>
    <div className="input__element">
      <input type="text" autocomplete="off" name="name" />
      <label>Your name</label>
    </div>
</form>

N.B Delete the header tag and all of it's content before pasting the code you copied.

Your App.js should look like this:

import React from 'react';
import './App.scss';

function App() {
    return (
     <div className="app">
      <form>
       <div className="input__element">
    <input type="text" autocomplete="off" name="name" />
     <label>Label</label>
       </div>
       </form>
      </div>
   );
}
export default App;

Notice the App.scss import.

Copy the scss code below and paste in you App.scss file.

$primary-color:#296EF9;

.app{
  display: flex;
  justify-content: center;
  align-items: center;
form{
  margin-top: 300px;
.input__element {
  position: relative;
  width: 100%;
  margin-bottom: 1rem;
  label{
    position: absolute;
    font-size: 1rem;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    color: #909090;
    padding: 0 0.3rem;
    margin: 0 0.5rem;
    transition: .1s ease-out;
    transform-origin: left top;
    pointer-events: none;
    font-size: 14px;
   }
   input {
    font-size: 1rem;
    outline: none;
    border: 1px solid #f3f1f1;
    border-radius: 5px;  
    padding: 1rem 0.8rem;
    color: #909090;
    transition: 0.1s ease-out;
    width: 100%;
     &:focus {
      border-color: $primary-color;  
     }
     &:focus + label {
      color: $primary-color;
      top: 0;
      transform: translateY(-50%) scale(.9);
     }
   }
 }
}
}

You can easily setup scss in your react app by running:
npm install --save node-sass and renaming your .css files to .scss

Open your teminal and run npm start. This command should automatically open your application in your default browser and you should see something like the screenshoot below.

After creating your application, you need to push it to GitHub.

Now the interesting part.

Open your terminal and run this command:
npm install gh-pages --save-dev. This would install the gh-pages package as a dev dependency.

Open your package.json file and add the following:
Add
"homepage":"http://your-github-username.github.io/repo-
name",
as one of the properties

Go to your scripts section and add these lines too:

      "predeploy":"npm run build",
      "deploy":"gh-pages -d build"

Finally, run npm run deploy to deploy your application.
Your application is finally live and can be access over the internet.

Thanks for reading.

This is my first technical article. Feel free to comment on it, give feedback on where I can improve on and also, like this article if it was helpful.