向 Heroku 发送 POST 请求反应应用程序，但检测为 OPTION，但在使用 POSTMAN 时工作正常答案

【问题标题】：Sending POST request react app to Heroku but detected as OPTION but work fine when using POSTMAN向 Heroku 发送 POST 请求反应应用程序，但检测为 OPTION，但在使用 POSTMAN 时工作正常
【发布时间】：2021-02-15 16:00:42
【问题描述】：

import React, {useState} from 'react';

const CommentForm = (props) => {

    const [inputHandler, setInputHandler] = useState();
    const [nameHandler, setNameHandler] = useState();

    const URL_COMMENT = `https://damp-sierra-44032.herokuapp.com/API/${props.postID}/comment`

    const submitValue = async (e) => {
       const data = {name: nameHandler, comment: inputHandler}
       await postComment(data);
       window.location.reload()
    }

    async function postComment(data) {
        await fetch(URL_COMMENT, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(data)
        });
      }
    

    return (
        <div>
            <form>
            <input type="text" name="name" placeholder="Name..." value={nameHandler} onChange={e => setNameHandler(e.target.value)} required></input>
            <input type="text" name="comment"placeholder={"Write comment here..."} value={inputHandler} onChange={e => setInputHandler(e.target.value)} required></input>
            <button type="submit" onClick={submitValue}>Submit</button>
            </form>
        </div>
    )
}

export default CommentForm

以上是我向 herokuapp 发送 POST 请求的代码。它不起作用，而是在 herokuapp 日志中检测为 OPTION 的请求因此未能在数据库中创建新评论

2020-11-02T23:51:31.954360+00:00 heroku[router]: at=info method=OPTIONS path="/API/5f9d629df576aa5950d2d72f/comment" host=damp-sierra-44032.herokuapp.com request_id=98971688-f1d8-494b-ad92-8e3697da5bf0 fwd="36.81.12.81" dyno=web.1 connect=1ms service=2ms status=204 bytes=301 protocol=https
2020-11-02T23:51:32.062268+00:00 heroku[router]: at=info method=OPTIONS path="/API/5f9d629df576aa5950d2d72f" host=damp-sierra-44032.herokuapp.com request_id=8c6d4c2d-eb99-4a2d-9d81-1868fe88eae0 fwd="36.81.12.81" dyno=web.1 connect=1ms service=4ms status=204 bytes=302 protocol=https

但是当我尝试在本地运行服务器并从我的 react 应用程序向 localhost 发出请求时，请求工作正常（成功在数据库中创建新评论）并且当我尝试使用邮递员并发出请求时到 heroku 应用程序发送带有 {name: name, comment: comment} 正文的 POST 请求，它令人惊讶地工作得很好，并且日志：

2020-11-03T00:00:09.178300+00:00 heroku[router]: at=info method=POST path="/API/5f9d3e869d653f4dd683aab4/comment" host=damp-sierra-44032.herokuapp.com request_id=a848fd35-8cdd-4318-8062-c6a415a7dedd fwd="36.81.12.81" dyno=web.1 connect=0ms service=291ms status=201 bytes=243 protocol=https
2020-11-03T00:00:09.179811+00:00 app[web.1]: [0mPOST /API/5f9d3e869d653f4dd683aab4/comment [32m201 [0m288.373 ms - 7[0m

此时我很困惑。

【问题讨论】：

标签： reactjs heroku

【解决方案1】：

好吧，我只是花了几个小时试图修复 fetch 和 axios 之间的这种切换，结果还是一样，这是因为我正在使用 button type="submit" 将其更改为 type="button" 并且它已解决

【讨论】：