浏览器 Fetch() API 未将正文发布到后端节点服务器

Posted 2023-03-14

【中文标题】浏览器 Fetch() API 未将正文发布到后端节点服务器

【英文标题】：Browser Fetch() API Is Not Posting Body To Backend Node Server

【发布时间】：2018-11-29 13:30:29

【问题描述】：

客户端浏览器：

API

class API 

    constructor() 

        this.api = "http://localhost:3000";
    

    async authenticate(product_id) 

        const url = this.api + '/api/auth';
        const body = 
            "product_id": product_id,
        

        console.log(body);

        const request = 
            method: 'POST',
            body: body,
        
        return await fetch(url, request);
    


module.exports = API;

索引

const account = await this.API.authenticate("56729b6b77c82288f746c0cf");

console.log(account)

在我的控制台中我得到了

响应类型：“cors”，网址：“http://localhost:3000/api/auth”， 重定向：false，状态：401，ok：false，... body : (...) bodyUsed ： 错误标头：标头 ok：错误重定向：错误状态：401 statusText：“未经授权”类型：“cors”网址： "http://localhost:3000/api/auth"

Fetch 加载失败：POST "http://localhost:3000/api/auth"。

服务器端：

app.ts

import express from 'express';
import logger from 'morgan';
import bodyParser from 'body-parser';
import mongoose from 'mongoose';
import passport from 'passport';
import cors from "cors";

import Routes from './routes';
import Config from './config/config';

class App 

    public app: express.Application;
    public config: any;

    constructor() 

        this.app = express();

        this.environment();
        this.database();
        this.middleware();
        this.routes();

    

    private environment(): void 

        this.config = new Config();

    

    private database(): void 

        const uri: string = this.config.db.uri;
        const options: any = this.config.db.options;

        mongoose.connect(uri, options).then(

            () => 
                console.log("MongoDB Successfully Connected On: " + this.config.db.uri)
            ,
            (err: any) => 
                console.error("MongoDB Error:", err);
                console.log('%s MongoDB connection error. Please make sure MongoDB is running.');
                process.exit();
            

        );

    

    private middleware(): void 

        this.app.use(cors());
        this.app.use(logger('dev'));
        this.app.use(express.json());
        this.app.use(express.urlencoded());
        this.app.use(passport.initialize());

    

    private routes(): void 

        const routes = new Routes(this.app);

    



export default App;

api/auth 路由

public store(req, res) 

      console.log(req.body)

req.body 为空。

【问题讨论】：

@Randy 否，因为该请求在邮递员中工作正常

@Randy 我更新了我的问题，向您展示了我的服务器端应用程序的代码。你可以看到我已经设置了 cors 和 bodyParser。

我什至已经更新为使用 express.json 和 urlencoder 而不是 bodyparser，但这仍然不能解决问题。

【参考方案1】：

您应该尝试在请求模式中添加：cors 在您的请求中。正文应该是一个字符串，您可能希望将内容类型的标头设置为 application/json:

let headers = new Headers();
headers.set('Content-type', 'application/json');

const request = 
    method: 'POST',
    body: JSON.stringify(body),
    mode: 'cors',
    credentials: 'include',
    headers: headers

查看浏览器网络选项卡中发生的情况也会很有帮助。

【讨论】：

我的请求中不需要身份验证令牌/标题。是否仍需要模式和凭据？

我已更新我的问题以包含浏览器的屏幕截图

如果您在请求中传递 Cookie 或 Authorization 标头，则需要凭据，所以我想这不是必需的。抱歉，我错过了 fetch 调用中的其他一些问题。我更新了响应。

对不起，我不明白你的意思。在我的身体 中，您会看到我传入了一个 product_id 输入。我的请求没有使用任何授权头，它不需要它来调用 api。

@Kay 你也可以张贴带有请求和响应的 HTTP 标头的浏览器网络选项卡的屏幕截图。像这样的东西：***.com/a/4423097/121199