Fetch() function causing a resourse blocked by CORS

Question

App.js :

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

class App extends React.Component {

  state = {
    character : {}
  };

  componentDidMount() {
    fetch("https://jobs.github.com/positions.json?description=basf")
      .then(data => console.log(data));
    console.log("Hello World");
  }

  render() {
    return (
      <div className="App">
        <h2>Hello World</h2>
      </div>
    );
  }
}

export default App;

Error Message -

Access to fetch at 'https://jobs.github.com/positions.json?description=basf' from origin 'http://localhost:3000' has been blocked by CORS policy: 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.

Failed to Fetch

Can you please provide me how to get past this issue and get required data. I am using Github Jobs API and its showing this message.

Does this answer your question? [No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe) — Edric, Dec 30 '19 at 06:53
Dont you nead to pass credentials in order to acess that API ? — Stefan Avramovic, Dec 30 '19 at 07:17

Lewa Bammy Stephen · Answer 1 · 2019-12-30T07:56:03.620

Here are several ways you can get it done

ONE

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

class App extends React.Component {

  state = {
    character : {}
  };

  componentDidMount() {
    fetch("https://jobs.github.com/positions.json?description=basf",{
                headers: {
                  'Content-Type': 'application/json',
                  'Access-Control-Allow-Origin': '*'
                })
      .then(data => console.log(data));
    console.log("Hello World");
  }

  render() {
    return (
      <div className="App">
        <h2>Hello World</h2>
      </div>
    );
  }
}

export default App;

TWO

Setting the mode parameter to no-cors.

fetch("https://jobs.github.com/positions.json?description=basf", {
      mode: "no-cors" // 'cors' by default
    }).then(data => console.log(data));

akhtarvahid · Answer 2 · 2019-12-30T07:30:00.450

1

Try this

you can solve this from frontend side if you are facing cors issue. using-

https://cors-anywhere.herokuapp.com/{type_your_url_here}

  componentDidMount(){
    fetch('https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json?description=basf'
    )
    .then(data => data.json())
    .then(data=>console.log(data))
  }

Working Demo

edited Dec 30 '19 at 07:30

answered Dec 30 '19 at 07:21

akhtarvahid

9,445
2
26
29

This works but aren't there limitations to using `https://cors-anywhere.herokuapp.com/`? – nibble Jul 28 '20 at 09:05
@nibble No... you can use because internally it has implemented to secure HTTP call. – akhtarvahid Jul 28 '20 at 14:29
This is now not available as the server has been shut down. – Darren Mar 31 '21 at 13:38

score 0 · Answer 3 · answered Dec 30 '19 at 07:31

By using the create-react-app proxy feature you can solve this problem.

Add proxy property to your package.json:

{
  // ...
  proxy: "https://jobs.github.com"
}

And then call the fetch function:

fetch("http://localhost:300/positions.json?description=basf")
      .then(data => console.log(data));

score -1 · Answer 4 · answered Dec 30 '19 at 07:26

-1

You need to use the no-cors header

 fetch("https://jobs.github.com/positions.json?description=basf", {
      mode: "no-cors" // 'cors' by default
    }).then(data => console.log(data));

look in this codesandbox

I hope this answer helped you :)

answered Dec 30 '19 at 07:26

Dor Lugasi-Gal

1,430
13
35

Fetch() function causing a resourse blocked by CORS

4 Answers4