Tips for resolving the issue: Uncaught (in promise) SyntaxError: Unexpected end of input in Fetch API

When I click the button, I am executing this function. Despite adding a header in my API, an error is still being displayed.

Here is the code snippet for the function:


    let getData = () => {
        console.log("getData function started");

        const options = {
            method: "GET",
            headers: new Headers({ 'content-type': 'application/json' }),
            mode: 'no-cors'
        };
        fetch("http://167.71.226.242/", options).then((response) => {
            console.log("Inside 1st then");
            return response.json();
        }).then((data) => {
            console.log("Inside 2nd then");
            console.log(data);
        });
    }

Answer №2

Perhaps consider implementing this approach and ensuring the correct header name is used in uppercase:

fetch('/', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  },
}).then(...);

It seems unnecessary to include new Headers();.

Additionally, you might not require mode: 'no-cors', but that decision is up to you :)

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

Unable to close Bootstrap 5 modal

All of my modal forms are functioning properly, except for one that I migrated from Bootstrap 4 to Bootstrap 5. This particular modal refuses to close. Neither the Close button (the X at the top of the popup) nor the Cancel button will close the modal. I ...

Having trouble accessing the loadTokenizer function in Tensorflow JS

As a beginner with Tensorflow.js concepts, I recently attempted to tokenize a sentence using the Universal Sentence Encoder in Javascript. You can explore more about it on Github Reference $ npm install @tensorflow/tfjs @tensorflow-models/universal-sentenc ...

using async.waterfall with async.apply

Here is a code snippet that I am working with: async.waterfall([ // Read directory async.apply(fs.readdir, '../testdata'), // Load data from each file function(files, callback) { async.each(files, loadDataFromFile, callback); } ], ...

How can I retrieve an array from an object containing both a property and an array in TypeScript?

One of my objects always consists of a property and an array. When I use the console.log(obj) method to print it out, it looks like the following example: ProjectName: MyTest1 [0] { foo: 1, bar: 2} [1] { foo: 3, bar: 4} [2] { foo: 5, bar: 6} Alternat ...

The icon is not being displayed when the onHover event on the Material UI component is triggered

I am currently working on adding a delete icon to a Material UI MenuItem component. I've created a state field within the component's state called isHovering, which is initially set to false. The goal is to display the delete icon when hovering o ...

Issue with toggling in react js on mobile devices

Currently, I am working on making my design responsive. My approach involves displaying a basket when the div style is set to "block", and hiding it when the user browses on a mobile device by setting the display to "none". The user can then click on a but ...

Passing Object Data from Child to Parent Component in React and Leveraging its Functionality

After performing a date calculation, I stored the values of year, month, and day in an object. Now, my goal is to send this object to the parent component App.js, and then pass that data to another child component named Modal.js as a prop. I want to displa ...

Generating a JavaScript bundle using the npm TypeScript compiler

Is there a way to compile TypeScript source files into one JavaScript bundle file? We have developed a tool on node.js and are currently using the following TypeScript compilation code: var ts = require('typescript'); ... var program = ts.creat ...

Unable to change the value of selected items in checkbox event within a React context

Today marks the beginning of my journey into developing a React application. I am currently faced with the challenge of retrieving the row ID of a checked checkbox in a React table. Utilizing hooks, I have managed to transfer the states to another compone ...

Refreshing an AJAX call automatically in Knockout JS

Greetings everyone! I'm currently working on setting up a simple setInterval function to automatically refresh my data every minute. The line that is giving me trouble is: setInterval(incidentViewModel.fetchdata,60000); I also attempted this: windo ...

Maintaining the position of the screen as you type in information that is located outside of the container

I am encountering an issue with the input/text-area element in absolute position extending halfway outside the container. The screen position seems to follow the caret as I type, but I'd prefer to keep writing and have part of the text hidden beyond t ...

Functionality that can be utilized repeatedly

I've been struggling to implement a feature for repeatable blocks in my web form. The issue I'm facing is that when I click the buttons, nothing happens even though they work fine when tested in the console. I've been stuck on this problem f ...

Using jQuery to add a checkbox to a list that is not ordered

My HTML structure includes an unordered list with nested lists. Here is a snippet of the code: <div id="checklist"> <ul> <li>On Page SEO <ul> <li>My work <i>And note.</i>< ...

Can someone recommend a straightforward PHP class for parsing JSON (or JSONP)?

Having to work with an older version of PHP (5.1.6) without access to convenient functions like json_decode, I am seeking a solution that doesn't require server privileges for installing extensions. I am looking for a lightweight and trustworthy clas ...

The dropdown in vue-multiselect automatically closes after the first selection is made, ensuring a smooth user experience. However,

I am experiencing an issue where the dropdown closes after the first selection, despite setting close-on-select="false". However, it works properly after the initial select. You can observe this behavior directly on the homepage at the following link: vue ...

transforming basic pagination using javascript to jquery implementation

I have a straightforward pagination code written in raw JavaScript. function UpdatePage(e){ if(busy == 0) { switch(e) { case "Next": page = p+1; p++; break; ca ...

What causes the error message 'avoid pushing route with duplicate key' when using NavigationStateUtils in React Native?

Within my React Native + Redux project, I have set up a reducer for navigation utilizing NavigationStateUtils: import { PUSH_ROUTE, POP_ROUTE } from '../Constants/ActionTypes' import { NavigationExperimental } from 'react-native' impo ...

Why do some button clicks not trigger a page refresh in JavaScript?

Hey there, I have a situation where I have two buttons - one to add a dog to the dog list and another to clear the entire list. Both buttons are functioning properly, but I'm having an issue with only the OnSubmit button refreshing the page. The dog ...

Implementing Vue directives in separate files and importing them into components: A step-by-step guide

For a project using Vuelidate, I have set up a timeout for validation when a user types something. While I achieved success using mixins, I wanted to adhere to good coding practices by creating a Vue directive without globally registering it, and utilizing ...

Tips for generating JavaScript within list elements using a PHP script

My PHP script is designed to fetch data from a database and display it as list items within a jQuery Dialog. The process involves creating an array in the PHP while loop that handles the query results, with each list item containing data, an HTML button, a ...