如何在 sapper 上获得正确的 http 状态代码？答案

【问题标题】：How can i get right http status code on sapper?如何在 sapper 上获得正确的 http 状态代码？
【发布时间】：2020-05-11 15:20:06
【问题描述】：

我创建了注册页面，并在没有任何输入的情况下提交。虽然后端服务器提高了 400 响应，但我得到了 200 我怎样才能在我的 js 代码上获得正确的状态？

下图是对我的后端服务器的 api 调用并响应 400 状态

api.js

const base = 'https://gyma9z0wme.execute-api.ap-northeast-2.amazonaws.com/dev';
// const base = 'http://127.0.0.1:8000';

function send({ method, path, data, token }) {
    const fetch = process.browser ? window.fetch : require('node-fetch').default;

    const opts = { method, headers: {} };

    if (data) {
        opts.headers['Content-Type'] = 'application/json';
        opts.body = JSON.stringify(data);
    }

    if (token) {
        opts.headers['Authorization'] = `Bearer ${token}`;
    }

    return fetch(`${base}/${path}`, opts)
        .then(r => r.text())
        .then(json => {
            try {
                return JSON.parse(json);
            } catch (err) {
                return json;
            }
        });
}

export function get(path, token) {
    return send({ method: 'GET', path, token });
}

export function del(path, token) {
    return send({ method: 'DELETE', path, token });
}

export function post(path, data, token) {
    return send({ method: 'POST', path, data, token });
}

export function put(path, data, token) {
    return send({ method: 'PUT', path, data, token });
}

utils.js

export function post(endpoint, data) {
    return fetch(endpoint, {
        method: 'POST',
        credentials: 'include',
        body: JSON.stringify(data),
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(r => r.json());
}

auth/register.js

import * as api from "api.js";

export function post(req, res) {
  const user = req.body;

  api.post("users", user).then(response => {
    if (response.user) {
      req.session.user = response;
    }

    res.setHeader("Content-Type", "application/json");

    res.end(JSON.stringify(response));
  });
}

注册/index.svelte

<script>
  import { goto, stores } from "@sapper/app";
  import ListErrors from "../_components/ListErrors.svelte";
  import { post } from "utils.js";
  const { session } = stores();
  let username = "";
  let email = "";
  let password = "";
  let errors = null;
  async function submit(event) {
    const response = await post(`auth/register`, { username, email, password });
    // TODO handle network errors
    if (response.status === 400){
      errors = response;
    }
    if (response.sn) {
      $session.sn = response.sn;
      goto("/");
    }
  }
</script>

<svelte:head>
  <title>회원가입 • Razberry</title>
</svelte:head>

<div class="auth-page">
  <div class="container page">
    <div class="row">
      <div class="col-md-6 offset-md-3 col-xs-12">
        <h1 class="text-xs-center">회원가입</h1>
        <p class="text-xs-center">
          <a href="/login">이미 회원인가요?</a>
        </p>

        <ListErrors {errors} />

        <form on:submit|preventDefault={submit}>
          <fieldset class="form-group">
            <input
              class="form-control form-control-lg"
              type="text"
              placeholder="Your Name"
              bind:value={username} />
          </fieldset>
          <fieldset class="form-group">
            <input
              class="form-control form-control-lg"
              type="text"
              placeholder="Email"
              bind:value={email} />
          </fieldset>
          <fieldset class="form-group">
            <input
              class="form-control form-control-lg"
              type="password"
              placeholder="Password"
              bind:value={password} />
          </fieldset>
          <button class="btn btn-lg btn-primary pull-xs-right">회원가입</button>
        </form>
      </div>
    </div>
  </div>
</div>

我正在使用真实世界的代码。

https://github.com/sveltejs/realworld

尝试在此处使用不正确的信息登录。你可以得到相同的结果

https://realworld.svelte.dev/login

【问题讨论】：

你应该发布一些代码。还有一个好的做法是直接在 SO 上发布图片（没有链接！）
我无法直接上传图片。我还需要 3 分
现在你应该可以（我赞成：P）
您无需为代码或错误消息上传图片。因此，请发布您的代码，以便我们为您提供适当的帮助。
可能是服务器通过 http 以 200 / OK 响应请求，即使后端出现错误。后端的不良行为，但现实世界......

标签： javascript http frontend svelte sapper

【解决方案1】：

  api.post("users", user).then(response => {
if (response.user) {
  req.session.user = response;
}

res.setHeader("Content-Type", "application/json");

res.end(JSON.stringify(response));

在 req.session.user = response 之后，您没有“else”子句，因此代码将通过 setHeader 并发送响应。你需要做什么：

  api.post("users", user).then(response => {
if (response.user) {
  req.session.user = response;
res.setHeader("Content-Type", "application/json");
res.end(JSON.stringify(response));
} else { res.sendStatus(403).end(); }

【讨论】：

TypeError: res.sendStatus 不是函数

【解决方案2】：

可能是服务器通过 http 以 200 / OK 响应请求，即使后端出现错误也是如此。后端的不良行为，但现实世界......

另一方面，您可以在 api.js 中的 fetch()ing 函数中添加 .catch(()=>{}) 语句来处理错误。

响应状态不是错误的一部分。如您所料，可以在 response.status 中找到状态。因此，服务器以 200/OK HTTP 状态响应。

查看响应正文。我知道一个以 200/ok 响应的后端，并且在正文中是一个字符串“发生错误”：P

【讨论】：