对 NodeJS JSON 错误的 Angular 发布请求

Question

所以我正在向 nodeJS 应用程序发送一个 POST 请求，我在 Angular 中的请求如下所示：

export class SearchComponent {
  constructor(private http: HttpClient) {}

  newWord = '';
  keyword = '';

  onClick() {
    const headers = new HttpHeaders()
      .set('Authorization', 'my-auth-token')
      .set('Content-Type', 'application/json');

    this.http
      .post('http://localhost:3000/search', JSON.stringify(this.keyword), {
        responseType: 'text',
        headers: headers,
      })
      .subscribe((data) => {
        this.newWord = data;
      });
  }
}

当我尝试 console.log 请求时，即使我尝试了在 stackoverflow 上可以找到的所有解决方案，我在 JSON 中的位置 0 处得到一个 Unexpected token 错误，这就是我的 NodeJS 应用程序的设置方式和错误：

const bodyParser = require("body-parser");
const express = require("express");
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.all("/*", function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS");
  res.header(
    "Access-Control-Allow-Headers",
    "Content-Type, Authorization, Content-Length, X-Requested-With"
  );
  next();
});

app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

app.post("/search", (req, res) => {
  res.send(req.body);  
});

我得到的错误是这样的：

SyntaxError: Unexpected token " in JSON at position 0
    at JSON.parse (<anonymous>)....

请注意，如果我不使用 JSON.stringify 没有发生错误但 req 变量是“未定义”，则 this.keyword 从输入字段中获取其值。

Answer 1

假设您正在询问如何取回数据。 我不确定这是否可行，但您可以尝试一下：

在评论下，看到你的意思是 this.keyword。 这是我要做的改变

按轴格式，这可能是不正确的

.post('http://localhost:3000/search', JSON.stringify(this.keyword), {
        responseType: 'text',
        headers: headers,
      })

相反，尝试：

.post('http://localhost:3000/search', {
        keyword: this.keyword, // changed this
        responseType: 'text',
        headers: headers,
      })

同样在您的服务器中，您可以更改为：

const app = express();
app.use(express.json())
app.use(express.text())
app.use(express.urlencoded({ extended: true }))

（现在快递中包含正文解析器）

mern 堆栈的新手（从未使用过 Angular）有点不确定，但希望能有所帮助