gabaroar / hapi-cors

5 stars 5 forks source link

React doesn't have access to the actual error object in react/redux development? #10

Open scheung38 opened 5 years ago

scheung38 commented 5 years ago

React client running in localhost:3032:

fetchData = () => dispatch => {
    fetch('http://localhost:3000/api/v3/search')
      .then(res => res.json())
      .then(posts =>
        dispatch({
          type: actions.FETCH_POST,
          payload: posts
        })
      )
  }

Hapi server at localhost:3000:

await server.register([
    {
      plugin: require('hapi-cors'),
      options: {
        origins: ['http://localhost:3032']
      }
    }]

"hapi": "^17.8.1", "hapi-cors": "^1.0.3",

When this is called, from

componentDidMount() {
  this.props.fetchData()
}

the response is: A cross-origin error was thrown. React doesn't have access to the actual error object in development

Tried:

const server = new Hapi.Server({
    port: process.env.FACADE_PORT || DEFAULT_PORT,
    routes: {
      cors: {
        origin: ['*'],
        headers: ["Accept", "Content-Type"],
        additionalHeaders: ["X-Requested-With"]
      }
    }
  })

as well as

await server.register([
    {
      plugin: require('hapi-cors'),
      options: {
        origins: ['http://localhost:3000']
      }
    },

Still don't work?

fictitiouswizard commented 5 years ago

Hapi-Cors does not return an error message. It will set the correct headers for you on the request. When you make your request can you see origin and Access-Control-Allow-Origin headers in the developer tools of your browser?