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

Posted 2023-02-27

【中文标题】从 JSON 响应中删除不需要的标签

【英文标题】：Removing unwanted tags from JSON response

【发布时间】：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

【参考方案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': '*'？ ***.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);