Search code examples
javascriptreactjsaxioscorspostman

React/Axios API Get Request Issues (CORS & Internal Server Error 500)

I am attempting to complete an axios GET request to an API and I'm running into an Internal Server Error - 500 and I'm curious if this is simply my code and/or my attempt at making this call or something else. Even though the CORS issue seems to be behind me, I'll start from the beginning just in case its related to my current issue.

My initial attempt at the request gave me the following CORS error:

...from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight
request doesn't pass access control check: It does not have HTTP ok status.

After doing a lot of research on this, I found that I could append https://cors-anywhere.herokuapp.com to my target API URL and get around this issue. So far, so good but now I am getting the following locally in my browser: net::ERR_NAME_NOT_RESOLVED

So I decided to jump over to Postman and input the given headers to access this API to see if I could find more information and I'm getting the following on Postman:

{
    "timestamp": "2020-11-13T01:04:47.288+0000",
    "message": "General error occurred please contact support for more details",
    "error": "Internal Server Error",
    "status": 500
}

Now, within the documentation of this API, it states that a 500 is a server error on their part but I'm not confident in that as I think it may just be my own doing here. So I basically have two questions...

  1. Should the developer of the API do/change anything to avoid the CORS issue or is that a common thing to run into?
  2. Is the 500 error response on me or them?

Below is my axios request in my App.js file of my React application. Please let me know if any other code or info is needed. Thanks so much in advance for any help!

import React, { Component } from 'react';
import './App.css';
import axios from 'axios';

class App extends Component {
  state = {
    events: []
  }

  constructor() {
    super();
    const proxyURL = 'https://cors-anywhere.herokuapp.com'
    const URL = 'https://api.example.com/api/'
    const proxiedURL = proxyURL + URL

    axios.get(proxiedURL, {
      headers: {
        'Accept': 'application/json',
        'Authorization': 'Bearer ' + process.env.REACT_APP_AUTH_API_KEY
      }
    })
    .then((res) => {
      console.log(res.data)
    })
    .catch((error) => {
      console.log(error)
    })
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>Data</h1>
        </header>
      </div>
    );
  }
}

export default App;
Solution

  • According to the documentation for cors-anywhere:

    This API enables cross-origin requests to anywhere.

    Usage:

    / Shows help /iscorsneeded This is the only resource on this host which is served without CORS headers. /
    Create a request to , and includes CORS headers in the response.

    Your code is missing a trailing slash after https://cors-anywhere.herokuapp.com to work, i.e.: https://cors-anywhere.herokuapp.com/.

    To answer your two other questions:

    1. CORS issues are very common and it is up to the developer of the API to set from which domain the API can be called. More on MSDN
    2. The 500 response means this in an internal server error, so on the server-side. Though it can be because of many reasons, like querying the wrong URL, passing unexpected data... Ideally all these should be covered and different errors would be returned every time but this is rarely the case. :)