使用JavaScript Fetch无法提交请求至REST API端点，但Postman可正常提交

嘿，我一眼就看到问题所在了——你代码里的mode: 'no-cors'正是导致Fetch请求失败的关键！

这个模式会让浏览器发起不透明请求，带来的限制包括：

• 你完全无法读取响应的任何内容（连response.ok都没法正确判断）
• 浏览器会限制请求头、请求方法的使用，甚至可能不会正确传递你在body里的JSON数据
• Postman不受浏览器同源政策约束，所以能正常请求，但浏览器里的Fetch在no-cors模式下会被各种限制，导致后端要么没收到正确请求，要么无法返回合法响应

第一步：修改Fetch代码，移除mode: 'no-cors' #

把你的代码调整成这样：

const { inputAOI, wktForCreation } = this.state;
fetch('http://192.168.1.127:8080/aoi/', {
  method: 'POST',
  headers: { 
    'Content-Type': 'application/json' 
  },
  body: JSON.stringify({ 
    userName: 'fuseim', 
    aoiName: inputAOI, 
    wkt: wktForCreation 
  })
})
.then(function (response) {
  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
  }
  return response.json(); // 假设后端返回JSON，可根据实际情况调整为text()等
})
.then(function(data) {
  console.log('请求成功，响应数据:', data);
  // 这里添加请求成功后的业务逻辑，比如更新页面状态
})
.catch(function(error) {
  console.error('请求失败:', error);
});

第二步：配置后端的CORS支持 #

移除no-cors后，浏览器会触发CORS预检请求（OPTIONS方法），所以你需要在后端配置允许前端域名的跨域访问：

• 设置响应头Access-Control-Allow-Origin为你的前端域名（比如http://localhost:3000，开发环境可暂时设为*，但生产环境务必指定具体域名）
• 允许POST方法和Content-Type请求头，设置Access-Control-Allow-Methods: POST, OPTIONS和Access-Control-Allow-Headers: Content-Type

不同后端框架的配置方式不同：比如Java Spring Boot可以加@CrossOrigin注解，Node.js/Express可以用cors中间件，Python Flask可以手动设置响应头，按你的后端技术栈对应配置即可。

这样调整后，你的Fetch请求应该就能和Postman一样正常工作了！

内容的提问来源于stack exchange，提问作者Owais