fetch() unexpected end of input
Opaque Responses
A response for a no-cors
request to a cross-origin resource has a response type of 'opaque'. If you log the response before trying to turn it to JSON, you will see a type of "opaque".
Opaque types are listed as "severely restricted" as explained in the fetch spec on whatwg.org.
An opaque filtered response is a filtered response whose type is "opaque", url list is the empty list, status is 0, status message is the empty byte sequence, header list is empty, body is null, and trailer is empty.
They cannot currently be read when the type is opaque as explained on Google's docs on the opaque type.
An opaque response is for a request made for a resource on a different origin that doesn't return CORS headers. With an opaque response, we won't be able to read the data returned or view the status of the request, meaning we can't check if the request was successful or not. With the current fetch() implementation, it's not possible to make requests for resources of a different origin from the window global scope.
Enable CORS support on your server
This can be environment-dependent or language-dependent. For example, you can change CORS settings within Nginx's environment by changing your server config, or you can specify headers within your application code such as in PHP.
I highly recommend reading the Mozilla documentation on CORS requests and also Access-Control-Allow-Origin.
An example in PHP:
<?php
header("Access-Control-Allow-Origin: *"); // "*" could also be a site such as http://www.example.com
SyntaxError: Unexpected end of input in fetch API
You are trying to parse text into json.
You can use res.json()
instead of res.send()
from your backend.
using of fetch API the unexpected end of input error occurr
You said mode:'no-cors'
, so fetch
doesn't attempt to read data across origins (which is forbidden by default), and it doesn't throw an error (because you told it you didn't want to try to read data across origins).
Change it to mode: "cors"
.
Ensure the server you are requesting the data from grants you permission to read the response using the Access-Control-Allow-Origin
header.
See also this answer about the Same Origin Policy.
fetch() POST requests with Express: unexpected end of JSON input
This error means that you're trying to parse something that is not a valid JSON object.
"SyntaxError: Unexpected end of JSON input at postText (script.js:23)"
Which is true, because the response you're sending back to the frontend is not a JSON.
router.post("/result", (req, res) => {
console.log(req.body);
// The response is not a valid JSON object
res.send();
});
You can change res.send()
to res.json()
and give it a valid object.
res.json({ name:"John", age:30, car:null })
Related Topics
Prevent Swiping Between Web Pages in iPad Safari
How to Load All the Images from One of My Folder into My Web Page, Using Jquery/Javascript
How to Find an Exact Word in a String
Using Thymeleaf Variable in Onclick Attribute
How to Programmatically Clear/Reset React-Select
How to Download a Base64-Encoded Image
Input Field Value Should Not Be Greater Than Other Field Value
Fetch - Missing Boundary in Multipart/Form-Data Post
How to Display Loading Message When an Iframe Is Loading
React Button Onclick Redirect Page
Regular Expression for Not Allowing Spaces in the Input Field
Regex With Space and Letters Only
Horizontal Scrollbar on Top and Bottom of Table
How to Delete a Localstorage Item When the Browser Window/Tab Is Closed