使用JS async/await请求API报CORS错误但浏览器直接访问正常如何解决？

浏览器同源策略仅限制JS发起的跨域异步请求，直接在地址栏访问接口属于页面导航行为，不会触发CORS校验，因此可以正常拿到返回结果。你当前的前端页面访问地址的协议、域名、端口三者中至少有一项和接口地址http://192.168.1.136:8080不一致，触发了跨域校验规则，因此JS请求被拦截报错。

你使用PHP开发后端接口，只需在api.php文件的业务逻辑执行前，添加CORS响应头即可解决问题，参考代码如下：

// 允许跨域请求，生产环境请将*替换为前端实际访问地址，例如 http://127.0.0.1:5500
header("Access-Control-Allow-Origin: *");
// 允许的请求类型
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
// 允许的请求头
header("Access-Control-Allow-Headers: Content-Type");
// 处理OPTIONS预检请求
if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    http_response_code(200);
    exit;
}

额外代码优化提示 #

你当前的前端代码直接将JSON对象赋值给DOM的innerHTML属性，最终会展示[object Object]而非实际数据，建议修改为转成JSON字符串后输出，或者取出对应字段渲染：

// 示例：转成格式化字符串打印
document.getElementById('result').innerHTML = JSON.stringify(output, null, 2)

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