拒绝 Promise 但 response.ok 是真的。 JavaScript Rails 获取请求“无法在'响应'上执行'json'：正文 stream 已读取”

Question

我试图在会员登录后将会员的信息从我的 Rails 后端传递到我的香草 JS 前端。这样我就可以存储会员的 id 以便以后将数据持久保存到会员个人资料的后端（例如，如果会员在他们的愿望清单中添加了一本新书）。

我能够在后端对成员进行身份验证并确认他们的凭据，但是当我尝试将登录的成员信息从 rails 发送到 JS 前端时，当我在控制台中运行resp.json()时出现以下错误。

无法在“响应”上执行“json”：正文 stream 已读取。 有趣的是，我得到了一个“真实”的 response.ok，状态为：201，但我无法访问会员的数据。

[[PromiseResult]]: TypeError: Response {type: "cors", url: "http://localhost:3000/login", redirected: false, status: 201, ok: true, …}

[[PromiseState]]: "rejected"

这是我的会议 controller：创造行动就是斗争。

class SessionsController < ApplicationController

    def create
        @member = Member
        .find_by(email: session_params[:email])
        .try(:authenticate, session_params[:password])
        binding.pry
        if @member 
            login!
            render json: {
                logged_in: true,
                member: @member 
            },
            status: :created 
        else 
            render json: { 
                status: 401,
             errors: ['No such member', 'Verify credentials and try again or sign up']
            }
        end
    end

    def is_logged_in? 
        if logged_in? && current_member
            render json: {
                logged_in: true,
                member: current_member
            }
         else
             render json: {
                 logged_in: false,
                 message: 'no such member'
            }
        end
    end

    def destroy
       logout!

        render json: { 
            status: 200, 
            logged_out: true 
        }
    end

    def session_params
        params.require(:member).permit(:email, :password)
    end
end

我的应用程序 controller：

class ApplicationController < ActionController::Base
    skip_before_action :verify_authenticity_token 

    helper_method :login!, :logged_in?, :authorized_member?, :logout!, #current_member (current_member is currently in controller/concerns)

    def login!
        session[:member_id] = @member.id
    end

    def logged_in?
        if @current_member
            render json: {
                logged_in: true, 
                member: @current_member
            }
        else
            render json: {
                logged_in: false
            }
        end
    end


    def authorized_member?
        @member == current_member
    end

end

和我的 JavaScript 获取请求侧栏：我不相信我需要注释掉的行：

async function submitLogin() {
  let email = document.getElementById("login-email").value;
  let password = document.getElementById("login-password").value;
  const memberLogin = { member: { email, password } };

  let options = {
    method: "POST",
    credential: "same-origin",
    headers: {
      "Content-Type": "application/json",
      // "Access-Control-Allow-Origin":
      //   "file:///Users/awb/Coding/Flatiron/Projects/bookclub-javascript-rails-api/bookclub-frontend-javascript/index.html",
      // "Access-Control-Allow-Methods": "POST",
      // "Access-Control-Allow-Headers": "Content-Type, Authorization",
      Accept: "application/json",
    },
    body: JSON.stringify(memberLogin),
  };

 fetch("http://localhost:3000/login", options)
    .then((resp) => {
      resp.json();
      debugger;
    })
}

Answer 1

可能是javascript fetch - Failed to execute 'json' on 'Response': body stream is locked 。 承诺只能解决一次。

由于您的 function 是异步的，请尝试：

let response = await fetch("localhost:3000/login", options); 
let data = await response.json();