未处理的拒绝（语法错误）：输入意外结束

Question

我正在制作一个专门用于电子邮件订阅者的组件......就像这样

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;

然而，我只得到这样的回应

Unhandled Rejection (SyntaxError): Unexpected end of input

当我检查 API 如何响应时，它会给我这样的预览

你知道我该如何解决这个问题吗？我想让这变得像人们输入电子邮件一样简单，只需单击按钮即可。

非常感谢您的帮助！

Answer 1

您收到的错误是因为，它发送了空响应（例如，将响应作为空对象 {} 获取），因为您正在尝试获取 json()。这是因为cors。

尝试将 ** 'Access-Control-Allow-Origin':'*' ** 添加到标头和模式中作为 'cors'。您需要首先从 API 获取响应。