无需代码调用，能否在浏览器查看Mirage JS的API响应？路由访问问题

我已经通过以下代码创建Mirage JS服务器，配置了GET /api/reminders路由：

import { createServer } from "miragejs"

export default function () {
  createServer({
    routes() {
      this.get("/api/reminders", () => ({
        reminders: [
            { id: 1, text: "Walk the dog" },
            { id: 2, text: "Take out the trash" },
            { id: 3, text: "Work out" },
          ],
      }))
    },
  })
}

目前通过组件代码调用该接口可正常获取响应，但直接在浏览器地址栏访问https://localhost:3000//api/reminders时无法得到预期响应。想知道：

• 是否可以直接通过浏览器发起请求查看Mirage JS的API响应？
• 当前操作存在什么问题？

能不能直接通过浏览器查看Mirage的API响应？ #

可以，但得用符合Mirage工作逻辑的方式，不能直接通过地址栏访问。

当前操作的核心问题 #

Mirage JS的核心是拦截当前页面内JavaScript发起的AJAX/fetch请求，它运行在浏览器的页面JS环境中。而地址栏输入URL发起的请求是浏览器独立发起的全新请求，不会经过Mirage的拦截层，自然无法触发Mirage的路由响应。另外你输入的地址存在双斜杠//的格式问题，规范地址应为https://localhost:3000/api/reminders，不过这不是无法获取响应的核心原因。

如何在浏览器中查看Mirage的API响应 #

• 通过浏览器控制台发起请求：打开页面开发者工具（F12），切换到Console标签，输入以下代码执行：

  fetch('/api/reminders').then(res => res.json()).then(data => console.log(data))
  

  执行后就能在控制台看到Mirage返回的reminders数据。
• 通过页面内交互触发：像你现有组件的逻辑那样，通过页面内的操作发起请求并渲染结果，直接在页面上查看响应内容。

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