I'm getting fairly tripped up and likely burning up too much brain energy over an issue with trying to use the Fetch API to retrieve a JSON data resource (of earthquake data) from an existing resource page.
To be up front, the task I'm attempting to tackle here is to complete an assessment for an interview, however, I didn't expect my efforts in this to be thwarted soon after beginning the assessment in the first code written: fetching a JSON data structure to be parsed, manipulated, and the rendered in an application built from Create-React-App.
The fetch is being made from inside the componentDidMount lifecycle inside a component designed primarily for retrieving and parsing the data:
componentDidMount() {
fetch('http://sitetest.test.com/seismic/data.json', {
credentials: 'include',
})
.then(response => {
console.log(response);
response.json();
})
.then(earthquakes => {
this.setState({ earthquakes });
})
.catch(error => {
console.log('====failure====');
console.log(error);
});
}
The simplest fetch request causes a CORS conflict to be reported to the console:
I spent a good bit of time reading into why the CORS conflict is being reported. Ultimately, the explanations I've read boil down to what is reported in the error output, that:
"No 'Access-Control-Allow-Origin' header is present on the requested resource."
As I've researched into possible solutions to resolve the CORS issue, I've read things like "it's impossible to resolve this unless you have access to the origin's server code itself" here, that the body of the JSON object I'm trying to retrieve can be gotten through setting up a proxy (still haven't been successful with this method).
Perhaps I just don't have enough understanding with how Fetch is wielded in such situations. What I'd like to do is try to investigate the problem by having my failing fetch request at least report some information to the console about the resource's headers which explictly shows how "No 'Access-Control-Allow-Origin' header is present on the requested resource.", but perhaps I should simply be satisfied with checking the Network pane in the console over on the resource page:
Right-click to view this image in a separate tab
Puzzling over this information reported in each the Response and Request Headers report, I just know someone with more experience in making asynchronous requests for data would point out what would be obvious to them in resolving the CORS conflict. My latest attempt to work around the CORS issue in my above code was to include the credentials in the options object passed into fetch. This idea occurred to me while reading over MDN's article on Using Fetch which, as I understood, would include the appropriate cookie if this type of auth configuration were encountered while making the request. There is a long, abstract (collection?) of cookie value(s) in the resource's Request Headers report, but attempting to include what I believed was the necessary means of handing off the needed cookie in my fetch request has proven unsuccessful.
In my research into this problem, I'm not finding too much that is relatable enough to my scenario which would indicate a good approach for resolving the CORS problem. I feel pretty lost and could really use some guidance. Perhaps someone could either point out a good resource for dealing with a number of different fetch operations, because as someone who is essentially self-taught, a lot of the web resources I've consulted so far: MDN, forums, Medium articles haven't allowed me to clearly piece together how to circumvent the CORS policy with the appropriate modifier to my fetch request.
Any ideas?
Looking forward to moving on from here, as the remainder of this task involves passing data around inside the React application which I feel I have plenty enough experience to overcome.
