An error popped up while using the fetch API due to an unexpected end of input

fetch('http://www.freegamesforyourwebsite.com/feeds/games/?tag=platform&limit=100&format=json', {
    method:'GET',
    mode:'no-cors',
    dataType: 'json',
    headers: {
        'Accept': 'application/json'
    }  
}).then(response =>
response.json()).then(addImage).catch(e => requestError(e,'image'));

console.log

SyntaxError: Unexpected end of input
 at fetch.then.response ((index):159)
 at <anonymous>

I attempted to fetch a JSON file using the Fetch API with CORS enabled. However, when I inspected the request headers in Google developer tools, it showed me the provision request header. Although the preview part displayed the JSON response, the promise after the response could not read the data, resulting in the error mentioned in the console log above. The URL I fetched is open source and can be used by anyone.

Any assistance would be greatly appreciated.

Answer №1

Your choice of mode:'no-cors' prevents the fetch function from attempting to access data from different origins, as this is not allowed by default. Therefore, it does not trigger a CORS error (as you explicitly specified no cross-origin access).

However, when you try to parse the response body (which cannot be accessed), there is no content to parse and an error is thrown.

To resolve this issue, consider changing the mode to mode:"cors".

Make sure that the server you are fetching data from allows access to its responses using the Access-Control-Allow-Origin header.


For further insights, refer to this explanation on the Same Origin Policy.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the placement of the fixed header waypoint or change its offset

Currently working on developing a Wordpress site with the Avada theme, my goal is to have a sticky header that starts immediately at the top of the page. This is the website in progress: The site I'm trying to emulate is synergymaids.com. If you vi ...

Traverse through the JSON data until a certain condition is satisfied, then proceed to tally the number

Looking to parse a json file containing user data and points. The goal is to loop through the data until the _id matches the userId, then determine the position of that user in the list based on the number of objects. The json file provided below already ...

What is the best way to eliminate the left padding on a TimelineItem component?

When using the Timeline component to display information, there are three columns: TimelinItem, TimelineSeparator, and TimelineContent. I tried setting the padding of TimelineItem to 0 but it didn't work. The <Trace/> component is a sub-compone ...

Guide on converting XML and JSON data in Swift 3

As a newcomer to IOS, I am looking to convert some mixed data (combination of XML and JSON) received from a SOAP web service into an array using Swift 3. This data is being received as a string variable in the parser method. func connection(_ connection: ...

Why is my code throwing an error stating "Unable to assign value to innerHTML property of null"?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="container">Lorem ipsum</div&g ...

Troubleshooting JavaScript Object allocation problem

As someone who is not an expert in JavaScript, I have a question that may seem silly. Let's say I have the following snippet of HTML: <div> <script type="text/javascript"> var variable_2 = new SomeObject(); </script ...

The (ReactJS + Redux) form fails to load when the /new segment is appended to the URL

I'm currently working on a project using React, Redux, and Rails. I've encountered an issue with loading the form. In my App.js file, I have set up a Router that defines the routes. import React, { Component } from 'react'; import { Br ...

How to access and retrieve data from a USB flash drive using Javascript

I am looking to print PDF files from a USB flash drive. I have decided to use Mozilla Firefox and the R-kiosk plugin along with the open library PDF.js, but I am facing an issue. How can I read folders and files to create a tree structure without using ...

Error: The function $scope.apply is invalid and cannot be executed

I am attempting to display the contacts list after retrieving it using rdflib.js. The data is being loaded and stored in the list within the scope. However, I am running into an issue where the $scope is not updating, and it appears that I may be calling ...

How to Use jQuery Slice to Display the Top N Items from a Dropdown Menu

How can I display only the top 10 results from multiple UL lists in my navigation? The code snippet provided below currently works for the first list, but how can I extend this functionality to all of the lists? $(document).ready(function() { var elem ...

The process of extracting a value from an array of objects encountered an error due to the undefined object

I am looking to extract the value from an array within an object while also implementing error checking. The code I currently have checks if a specific key exists in the object and if the value associated with that key is of type array. If both condition ...

Transforming a Python dictionary into JSON format for storing in a MySQL field with JSON data type

Encountering the following error: Invalid JSON text: "not a JSON text, may need CAST" at position 0 in value for column Attempting to insert this value: { "ath": 69045, "ath_date": "2021-11-10T14:24:11.849Z" ...

Why do I keep receiving a <prototype> object for each API request?

Currently, I am utilizing JSONPlaceholder in conjunction with Angular as part of my learning process. While I have been following the documentation meticulously and obtaining the correct output, there seems to be an additional element accompanying each obj ...

Gradually appear/disappear div element with a delay added

Storing divs in an array and deleting them after appending is my current method. Now, I'm looking to incorporate a fade-in and fade-out effect on each div with a delay. Check out this code snippet : var arr = $(".notification"); function display ...

Step-by-step guide to performing an AJAX request in JavaScript while using Ubuntu

My current setup involves using a JavaScript file in conjunction with NodeJS to execute AJAX calls. To accomplish this, I have installed and imported jQuery as demonstrated below: var http = require("http"); $ = require("jquery"); test(); funct ...

Steps to perform a json_decode after json_encode operation

When trying to use json_decode to merge multiple JSON objects and retrieve database values based on album ID, I encountered some issues. Can anyone point out where I might have made a mistake? $album_ids_id = array("album_ids" => array(2, 4, 5)); // $a ...

There is no record of the property's history

I am embarking on a fresh project utilizing React and TypeScript. One of the hurdles I have encountered is with the Router. Strangely, TypeScript does not recognize the history property, even though it should be accessible as mentioned in the documentation ...

Is it possible for the ajax url option to accept an array of URLs rather than just one?

Is there a way to retrieve and store data from multiple JSON URLs in an array? <script type="text/javascript"> urls = ["https://spreadsheets.google.com/feeds/list/1RsiDuydBBHyu4OBjlxq1YH6yT3qcJDMB6-YKU-xxd_k/od6/public/basic?hl=en_US&alt=jso ...

Storing extensive JSON data with AJAX, jQuery, and Java

Currently, I am utilizing jQuery AJAX to call a server-side method and sending a JSON string to the controller. Everything works smoothly when the JSON size is small, but as soon as it exceeds 7kb, the server side rejects the JSON string. I suspect that t ...