React fetch post，页面刷新，变成GET请求

如何解决React fetch post，页面刷新，变成GET请求

我的 REACT 网站上有一个登录页面，它使用 fetch 发送 POST 请求，但每次由于某种原因提交请求时，它都会刷新页面并将其作为 GET 请求发送，这是我登录页面上的方法：

    onSubmitSignIn = () => {
        fetch("http://192.168.56.1:8560/signin",{
            type: 'POST',headers: {'Accept': 'application/json','Content-Type': 'application/json'},body: JSON.stringify({
                email: this.state.signinEmail,password: this.state.signinPassword,}),})
        .then(response => response.json())
        .then(data => {
            if (data ==='success'){
    
            }
        })
          
    }

服务端签名页面如下：

app.post('/signin',(req,res) => {

    if (req.body.email === database.users[0].email && req.body.password === database.users[0].password){
        res.json("success"); 
    }else{
        res.status(404).json("Error loggingin");
    }
})

它与 Postman 一起工作正常，服务器似乎没问题。

我尝试将 HTTP 更改为 https，即使我的服务器是 HTTP 以防万一。 尝试重新启动两台服务器，尝试更改为获取到 axios，但似乎没有任何效果。

有什么想法吗？

解决方法

onSubmitSignIn = (event) => {
        event.preventDefault() // <= You Need this

        fetch("http://192.168.56.1:8560/signin",{
            type: 'POST',headers: {'Accept': 'application/json','Content-Type': 'application/json'},body: JSON.stringify({
                email: this.state.signinEmail,password: this.state.signinPassword,}),})
        .then(response => response.json())
        .then(data => {
            if (data ==='success'){
    
            }
        })    
    }

,

Create-React-App 代理开发中的 API 请求 -- src/setupProxy.js

人们经常从与后端实现相同的主机和端口为前端 React 应用提供服务。

不需要这样的设置。但是，如果您确实有这样的设置，那么编写 fetch('/api/todos') 之类的请求会很方便，而无需担心在开发过程中将它们重定向到另一个主机或端口。

要告诉开发服务器将任何未知请求代理到开发中的 API 服务器，请将 proxy 字段添加到您的 package.json，例如：

"proxy": "http://localhost:8560",

手动配置代理 首先，使用 npm 或 Yarn 安装 http-proxy-middleware：

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

接下来，创建 src/setupProxy.js 并将以下内容放入其中：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',createProxyMiddleware({
      target: 'http://localhost:8560',changeOrigin: true,})
  );
};

API： https://create-react-app.dev/docs/proxying-api-requests-in-development/

,

我只是回复以防万一有人遇到和我一样的问题，经过几个不眠之夜挖掘我的代码后，我认为我的登录页面模板是从“tachyon”模板中获取的，是什么我错过了，在我的版本控制中的某个地方，是一个实际上应该变成“div”的“表单”，在通过这里的这个问题之后 why-the-post-request-becomes-a-get-request 它击中了我，基本上，如果你碰巧来自“表单”内部的信息，并且该表单没有方法 post，它会自动将 API 请求转换为 GET 请求并用信息填写 URL。

这样就排序了。现在让我们解决其余的错误。