已配置CORS的本地Flask接口用Fetch请求仍返回opaque response求解

• 触发opaque响应的核心原因，是你在fetch调用中手动配置了mode: 'no-cors'。
• 不少开发者会误以为开启no-cors可以绕过跨域限制，实际上这是对CORS规则的典型误解：开启该模式后，请求确实可以正常发送到后端，后端也能按逻辑处理并返回数据，但不管后端的跨域响应头配置多么完善，浏览器都会强制将返回的响应标记为opaque类型，完全屏蔽实际响应内容，不允许前端JS读取，这类响应的status固定为0，body内容不可解析，是no-cors模式的固有设计，和后端服务是否运行正常没有关系。
• 你之前通过表单提交、直接在地址栏访问API端点可以正常拿到返回数据，是因为这类操作属于浏览器顶层导航行为，不受CORS跨域读取规则的约束，和Fetch这类异步JS接口的运行逻辑本身就存在差异，两者的行为不构成矛盾。

前端侧调整 #

• 直接移除fetch配置里的mode: 'no-cors'参数，让请求走浏览器默认的cors模式。只有该模式下，浏览器完成跨域校验后，才会把实际的响应内容开放给前端JS读取。
• 修正原有链式调用的逻辑缺陷：拿到response原始对象后，需要主动调用对应格式的解析方法读取内容（比如后端返回JSON格式数据就调用response.json()），不能直接把原始response对象作为返回值传递到下一个then逻辑中。
• 修正后的Fetch调用参考代码：

async function loadDoc(){
    await fetch('http://127.0.0.1:5000/findHotels', { method: 'GET'})
        .then(function (response) {
          console.log(response);
          // 解析后端返回的JSON内容
          return response.json();
        }).then(function (resData) {
          console.log('GET response:');
          console.log(resData); 
        });
}

后端侧调整 #

• 你当前Flask代码通过@cross_origin()装饰器已经正确配置了跨域响应头，之前这套配置完全没生效的原因，就是前端开启了no-cors模式，浏览器根本不会把校验后的响应暴露给JS。
• 如果后续需要给所有接口统一开放跨域，不用每个路由单独加装饰器，直接在Flask应用初始化时加全局配置即可，更省事：

app = Flask(__name__)
# 全局为所有路由开启跨域支持
CORS(app)

• 注意不要手动往响应头里重复添加Access-Control-Allow-Origin字段，否则会触发跨域头重复的校验错误，@cross_origin和全局CORS(app)已经自动完成了该配置，重复手动添加反而会导致问题。

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