HTTP request failing in React app due to CORS

Question

Trying to fetch JSON data from this API and it is failing. Any ideas on what I need to fix?

I am getting the following error:

Access to fetch at 'https://te-e10app01/ERP10/api/v1/Erp.BO.CustomerSvc/Customers' from origin 'http://localhost:3000' has been blocked by CORS policy.....

And error:

Failed to load resource: net::ERR_FAILED

Errors shown here


import React, { Component } from 'react';
import Customers from './components/customers';

class App extends Component {
  render() {

    return (
      <Customers customers={this.state.customers} />
    );

  }

  state = {
    customers: []
  }


  componentDidMount() {
    fetch('https://te-e10app01/ERP10/api/v1/Erp.BO.CustomerSvc/Customers', {
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Authorization": "Basic ##################"
      }
    })
      .then(res => res.json())
      .then((data) => {
        this.setState({ customers: data })
      })
      .catch(console.log)
  }
}

export default App;

You can't add CORS headers on the client. If you could, it would be pointless. You need to set them on the server, or use a proxy. There are hundreds of posts about this already, please do research on your specific server language. — jonrsharpe, Jun 30 '20 at 17:46
Okay thank you very much. How does Postman work then? I can get this data using Postman. — JAKDev, Jun 30 '20 at 17:56
Postman doesn't enforce CORS. It wouldn't make sense for it to: it doesn't have an origin. — jonrsharpe, Jun 30 '20 at 17:56
Okay so this is an API for an ERP program we use and they allow RESTful services. Please excuse my ignorance I am learning all this as I go. I am trying to request data for that using REACT. — JAKDev, Jun 30 '20 at 17:59
You need to arrange for server `te-e10app01` to add CORS response headers to permit your frontend app (from a different domain) to run. Can you show what response headers the endpoint `/ERP10/api/v1/Erp.BO.CustomerSvc/Customers` produces currently? — halfer, Jul 01 '20 at 20:28

score 0 · Answer 1 · answered Jul 01 '20 at 20:42

you need to cors to your backend, if you are using expressjs then its very easy install cors via npm i cors then const app=reqire('express')(); app.use(cors())

There is chrome extension which allows to toggle cors blocking property, but it's a temporary solution and is done only for testing purposes.

HTTP request failing in React app due to CORS

1 Answers1