Unhandled Rejection (SyntaxError): Unexpected end of input [duplicate]

Question

I am making a component that is dedicated to be take email subscriber... like this

import React from "react";

class SubscribeOffer extends React.Component {
constructor () {
    super();
    this.state={
        email: ""
    }
}

fillEmailToSubscribe = (event) => {
    this.setState({email: event.target.value});
}

submitEmailToSubscribe = () => {
    if (this.state.email > 3) {
        fetch('https://(myuser).list-manage.com/subscribe/post?u=(somenumber)&id=(myid)'
        ,{
            mode: 'no-cors',
            method:'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                email:this.state.email
            })
        })
        .then(response => response.json())
        .then(() => {
            alert('Thank you for subscribing!');
        })
    }

}

render () {
    return (
        <div>
            <h1>Get updated upcoming events in your inbox everyday!</h1>
            <p>Would you like us to give you updates with future updates upcoming events?</p>
            <input 
                type='email'
                name='email-address'
                id='email-address'
                placeholder="your email" 
                onChange={this.fillEmailToSubscribe}
                required
            />
            <button onClick={this.submitEmailToSubscribe}>Subscribe</button>
        </div>
    )
}
}

export default SubscribeOffer;

However, I only get a response like this

Unhandled Rejection (SyntaxError): Unexpected end of input

when i check how the API respond, it gives me the preview like this

Do you have any idea how can i solve this? I was making this to be as simple as people input their email and just click the button and that's it.

Very appreciate for any of your help!

Answer 1

The error you are getting is because, it sends the empty response( eg. Getting the response as empty object {}), in that you are trying to get the json(). This is because of cors.

Try adding the ** 'Access-Control-Allow-Origin':'*' ** to the header and mode as 'cors'. You need to get the response first from the API.