我怎样才能在 sapper 上获得正确的 http 状态代码？

Question

我创建了注册页面，并在没有任何输入的情况下提交。尽管后端服务器提高了 400 响应，但我得到了 200 ok 我怎样才能在我的 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));
  });
}

register/index.苗条

<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

Answer 1

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

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

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

看看响应正文。我知道一个后端以 200/ok 响应并且在正文中是一个字符串 "an error occured" :P

Answer 2

  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 = 响应之后，您没有 '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(); }

我怎样才能在 sapper 上获得正确的 http 状态代码？

How can i get right http status code on sapper?

javascript

frontend

http

svelte

sapper

api.js

utils.js

auth/register.js

register/index.苗条