Unhandled Rejection (SyntaxError): Unexpected end of input

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!

Solution

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.