为什么我的 POST 请求会创建 URL 查询字符串？答案

【问题标题】：Why is my POST request creating URL Query Strings?为什么我的 POST 请求会创建 URL 查询字符串？
【发布时间】：2020-09-10 02:46:06
【问题描述】：

我有一个有路由问题的 React 程序。我正在为注册系统使用 POST 请求，每当我点击注册时，用户输入的密码和电子邮件地址都会放在我不想要的 URL 的顶部。我不知道为什么这个 POST 请求会在 URL 中显示这些内容。它也只是把我带到一个空白页。我认为这是 .get('/'); 的问题

这是我点击“注册”时调用的代码：

onSubmitSignIn = () => {
        fetch('http://localhost:3000/register', {
            method: 'post',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                email: this.state.email,
                password: this.state.password,
                name: this.state.name
            })
        })
        .then(response => response.json())
        .then(user => {
            if (user.id) {
                this.props.loadUser(user);
                this.props.onRouteChange('home');
            }
        })
    }

这里是服务器上的所有路由：

app.get('/', (req, res) => { res.send() });
app.post('/signin', Signin.handleSignin(db, bcrypt));
app.post('/register', (req, res) => { Register.handleRegister(req, res, db, bcrypt) });
app.get('/profile/:id', (req, res) => { Profile.handleProfileGet(req, res, db)});
app.put('/image', (req, res) => { Image.handleImage(req, res, db)});
app.post('/imageurl', (req, res) => { Image.handleApiCall(req, res)});

有谁知道它为什么要创建 URL 参数？我没有告诉它。 /signin 路由也是一个 POST 请求，但它不这样做。

【问题讨论】：

标签： javascript reactjs http url post

【解决方案1】：

我会检查您的浏览器控制台以确认它实际上是以POST 而不是GET 发送的。在 URL 中包含数据表明它正在通过表单提交作为 GET 提交。我不认为这是错误的，但我会将您的方法从post 更改为POST。更有可能的是，我怀疑您的表单标记可能设置为 GET，并且您的自定义获取逻辑未正确取消表单提交事件。

【讨论】：

基本上，确保您的表单有一个method="POST" 或在submit 事件上使用JavaScript 到e.preventDefault();，这样您就可以通过AJAX 处理POST 请求。
我在浏览器控制台中看到它是作为 POST 发送的。
除了您已经提供的内容之外，您能否分享生成表单字段和提交按钮的标记？
伙计们，我在表单标签中添加了“method='POST'”并修复了 URL 问题....但现在它把我送到了错误的页面！
您的标记未在您的上一条评论中呈现。关于被发送到错误的页面——这就是进展，这意味着它是我最初描述的。您需要将您的事件处理程序附加到表单 submit 事件，然后 event.preventDefault(); 处理浏览器的本机表单（提交数据并转到该页面）。