React Fetch: Getting json result but showing network error - json

Question

I spent the day setting up ssl on my local machine. I am running a wamp stack to build an api locally for testing. This endpoint is set up for ssl now and works perfect. I have a simple route setup that returns a json response.
https://localhost/api/test
It works via firefox by visiting that address.
Now, I am running a react app on
localhost:3000
The problem I am having is that I am trying out the fetch() api and using an example found on the react site (https://reactjs.org/docs/faq-ajax.html). Here is the code but it's extremely simple.
import React, { Component } from "react";
class Api extends Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
items: []
};
}
componentDidMount() {
fetch("https://localhost/api/test")
.then(res => res.json())
.then(
result => {
this.setState({
isLoaded: true,
items: result.items
});
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components.
error => {
this.setState({
isLoaded: true,
error
});
}
);
}
render() {
const { error, isLoaded, items } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<ul>
{items.map(item => (
<li key={item.name}>
{item.name} {item.price}
</li>
))}
</ul>
);
}
}
}
export default Api;
The kicker is, if I look at the console, I am getting a 200 response code from the request and also the actual JSON response with the proper data....yet for some reason in the app it is printing NetworkError when attempting to fetch resource.
I would understand the error if it wasn't getting the proper response or code but this just doesn't make sense.
Any advice would be helpful and appreciated!

Answer 1

Well, it looks like it was a CORS issue...which I didn't think would be a problem since everything is local. I had to add the following to my Flight Api backend.
Flight::before('json', function () {
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET,PUT,POST,DELETE');
header('Access-Control-Allow-Headers: Content-Type');
});

Answer 2

You have to make sure that CORS is enabled in your HTTP headers which you can do from server side and for client side you have to just write mode:'cors' in your fetch api call, because the server would throw an error and your browser would not be able to load the content served for the requested client.