使用JS fetch()发送POST请求无响应，请求已成功提交求助

核心问题 #

你设置了mode: 'no-cors'，这直接导致浏览器无法获取服务器返回的响应内容。

从开发者工具的截图可以看到，请求的响应状态码为0，响应类型为opaque（不透明响应）——当使用no-cors模式时，浏览器会生成这种受限的响应，你无法读取任何响应头、响应体信息，哪怕服务器已经成功处理请求并返回了数据。

解决方案 #

1. 移除mode: 'no-cors'配置 #

修改你的fetch代码，删掉mode: 'no-cors'这一行，让浏览器使用默认的cors模式，同时别忘了解析JSON格式的响应：

fetch('http://127.0.0.1:8000/users/add', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        "id": "johndoe1234",
        "name": "John Doe",
        "card": "bhgst-xxxx",
        "permissions": 1
    })
})
.then(resp => {
    if (!resp.ok) throw new Error(`HTTP错误状态码: ${resp.status}`)
    return resp.json()
})
.then(data => console.log('响应数据:', data))
.catch(err => console.error('请求出错:', err))

2. 后端配置CORS #

浏览器的同源策略会限制跨域请求，因此需要在后端服务器添加CORS配置，允许前端所在的域名发起请求：

• 如果是Python Flask框架，可使用flask-cors扩展：

  from flask import Flask
  from flask_cors import CORS
  
  app = Flask(__name__)
  # 开发环境可允许所有域名，生产环境需指定具体前端域名
  CORS(app, origins="http://localhost:你的前端端口号")
  

• 如果是Node.js Express框架，可使用cors中间件：

  const express = require('express')
  const cors = require('cors')
  const app = express()
  
  // 开发环境可允许所有域名，生产环境需指定具体前端域名
  app.use(cors({ origin: "http://localhost:你的前端端口号" }))
  

为什么Postman/Python Requests能正常工作？ #

Postman、Python Requests这类工具不受浏览器的同源策略约束，它们直接发送HTTP请求，不需要遵守CORS规则，因此能正常接收并显示服务器的响应内容。

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