CODEWITHSUNDEEP
reactjsapiaxios
Dmitriy
Dmitriy

Reputation: 1241

Axios Get Request W/ Header Not Working

I'm trying to make a get request with Axios to an API that requires an API key as a header, and I'm not sure what I am doing wrong. I am getting two errors in the console. 1: xhr.js:178 OPTIONS https://api.propublica.org/congress/v1 403 (Forbidden). 2: Failed to load https://api.propublica.org/congress/v1: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 403. I'm using React -- Thanks for looking

const API_KEY = "*******";
class List extends Component {
  state = {
    legislators: []
  }

  componentDidMount() {
    axios
      .get("https://api.propublica.org/congress/v1", {
        headers: { 'Authorization': API_KEY }
      })
      .then(data => console.log(data));
  }

Upvotes: 1

Views: 1511

Answers (1)

illiteratewriter
illiteratewriter

Reputation: 4333

It is most probably a CORS issue.

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to let a user agent gain permission to access selected resources from a server on a different origin (domain) than the site currently in use.

You can read more on CORS here.

To bypass CORS you can use CORS-anywhere. The documentation for which is provided here

The header should be provided in the format X-API-Key: PROPUBLICA_API_KEY and not 'Authorization': API_KEY (refer docs)

Upvotes: -1

Related Questions