javascript - 未处理的拒绝(语法错误): Unexpected end of input

Question

这个问题已经有答案了:

Handle response - SyntaxError: Unexpected end of input when using mode: 'no-cors' (6 个回答)

已关闭 4 年前。

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

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':'*' ** 添加到 header 和模式中作为 'cors'。您需要先从 API 获取响应。