从 JSON 响应中删除不需要的标签答案

【问题标题】：Removing unwanted tags from JSON response从 JSON 响应中删除不需要的标签
【发布时间】：2021-06-27 08:03:03
【问题描述】：

希望有人能提供帮助，我正在使用以下代码在我的 React 应用程序中的端点执行获取：

try {
        const response = await fetch("https://myendpoint.com/abcd/search?c=abc123");
        const jsonData = await response.json();
        console.log(jsonData);

      } catch (err) {
        console.error(err.message);
      }

并找回错误：server.js:1 Unexpected token < in JSON at position 0

在 Postman 中，当我运行它并返回 JSON 时，我又回来了：

<pre>{
       "name": "abc123",
       "location": "USA",
       "notes": "qwerty"
}</pre>

现在我无法控制响应，我假设错误与来自<pre> 的"<" 有关。

删除这些标签的最佳方法是什么，即<pre> and </pre>，以便我可以取回有效的 JSON？

【问题讨论】：

你不能把端点当作 JSON 来处理。
最好的办法是与构建该后端服务的人交谈并告诉他们正确响应，因为 json 响应周围不应该有
```
 标记。这不是辩论或讨论，只是反应被破坏了。
```
明白你在说什么，但我不相信这是可能的。所以我无法以某种方式解析它然后返回有效的 JSON 响应？
如果您无法更改后端，请尝试console.log(jsonData.replace('<pre>', '').replace('</pre>', ''));
jsbin.com/vaguzelicu/edit?js,console,output

标签： javascript json reactjs

【解决方案1】：

pre 标记即将出现，因为发出的请求是针对 html 的。不适用于 json 响应。您需要传递 Content-Type 设置为 application/json 的标头。这应该可以解决您的问题。

try {
  const response = await fetch('https://myendpoint.com/abcd/search?c=abc123', {
    headers: { 'Content-Type': 'application/json' }
  });
  const jsonData = await response.json();
  console.log(jsonData);
} catch (err) {
  console.error(err.message);
}

【讨论】：

@evolutionxbox @Erick - 试过了，这似乎已经解决了这个问题，但现在出现了错误：from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response. 这个问题有吗？
尝试添加标题'Access-Control-Allow-Headers': '*'？ stackoverflow.com/questions/36878255/…
抱歉@evolutionxbox - 我到底应该在哪里添加这个，另一方面，我应该使用 Axios 而不是 FETCH API？
@tonyfat 在headers 对象中。我不认为使用 Axios 会在这里简化任何事情
@evolutionxbox - 我添加了这个，它没有任何区别：headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Headers': '*' } 好像这个端点没有启用 CORS。

【解决方案2】：

虽然我不认为这是推荐的答案，但如果您不控制服务器并且 Content-Type 标头不起作用，这是一个解决方案。

try {
  const response = await fetch('https://httpbin.org/get');
  const responseText = await response.text();
  const convertedResponseText = responseText.replace(/\<pre\>|\<\/pre\>/gm, '');
  const responseJSON = JSON.parse(convertedResponseText);
  console.log(responseJSON);
} catch (err) {
  console.error(err.message);
}

【讨论】：