向Tomcat发送POST请求时如何解决浏览器中的Javascript fetch API错误？

Posted 2023-02-27

【中文标题】向Tomcat发送POST请求时如何解决浏览器中的Javascript fetch API错误？

【英文标题】：How to resolve Javascript fetch API error in browser when sending POST request to Tomcat?

【发布时间】：2021-10-02 23:30:13

【问题描述】：

我在 Spring Boot 中有一个 RESTful API，并实现了一些端点。 Tomcat 在 8080 端口上运行良好，Postman 请求得到响应，但尝试从浏览器获取时出错。

脚本：

  let candy = 
    id: id, //previously declared id variable being passed
    flavor: 0
  ;
  fetch('localhost:8080/api/candy', 
    method: "POST",
    headers: 
      'Content-Type': 'application/json;charset=utf-8'
    ,
    body: JSON.stringify(candy)
  )
  .then(response => response.json())
  .then((response) => 
    console.log(response.message);
  );

Postman 中的 POST 请求到：

localhost:8080/api/candy

与身体：

    "id": 243,
    "flavor": 2

返回：

    "id": 243,
    "flavor": 2

这是我所期望的。

当我访问localhost:8080 时，Tomcat 的欢迎页面打开得很好，但我不知道为什么它不能发送 POST 请求。 Chrome 和 Opera 中的错误是：

GET http://localhost:8080/favicon.ico 404 //this one only under Chrome
Fetch API cannot load localhost:8080/api/candy. URL scheme "localhost" is not supported.
Uncaught (in promise) TypeError: Failed to fetch
    at htmlButtonElement.<anonymous>

有什么想法吗？

编辑：在 Opera 下我得到 Fetch API cannot load localhost:8080/api/candy. URL scheme must be "http" or "https" for CORS request. 错误，但可能是同一回事。

【问题讨论】：

错误信息不言自明：您需要使用完整的 URL http://localhost:8080/api/candy，而不是它的一部分 localhost:8080/api/candy。尽管现在的浏览器倾向于隐藏 URL 的方案部分，但它仍然是必需的。

是的@PiotrP.Karwasz，谢谢，我添加了 http 协议，它确实解决了问题，但我不明白为什么 Postman 不需要它。 Postman 会自动追加吗？

是的，它必须对您输入的字符串应用一些启发式方法，浏览器也是如此。

谢谢您，您介意将其作为答案以便我接受吗？ @PiotrP.Karwasz

【参考方案1】：

fetch()的第一个参数应该是请求资源的URL。您只使用localhost:8080/api/candy，缺少该方案。

用途：

http://localhost:8080/api/candy

改为。

现在大多数工具（浏览器、邮递员）不显示当前页面的方案，但它仍然是必需的。