Vue3调用RAWG API遇CORS错误，是否存在请求超限问题及解决方法

一、Vue3是否会出现类似React的无限请求问题？ #

不会。Vue3的onMounted生命周期钩子只会在组件挂载完成后执行一次，不像React的useEffect未指定依赖数组时会在每次渲染后触发。你当前代码里onMounted调用fetchGames的写法是正确的，不会导致无限请求。

二、当前CORS错误的真实原因 #

错误核心逻辑是：当请求的credentials（凭证）模式为include时，响应头的Access-Control-Allow-Origin不能使用通配符*。

这说明你的请求携带了凭证信息（比如cookie、HTTP认证数据），但RAWG API的CORS配置仅允许所有源（*），不支持带凭证的跨域请求，因此浏览器拦截了响应结果。

三、修复步骤 #

1. 关闭Axios的withCredentials配置 #

RAWG API通过URL中的key参数验证身份，不需要携带凭证，直接在请求中显式禁用：

async fetchGames() {
    const options = {
        method: 'GET',
        url: 'https://api.rawg.io/api/platforms?key=YOUR_API_KEY',
        withCredentials: false // 关闭凭证携带
    }
    try {
        const response = await $axios.request(options)
        // 注意：RAWG的platforms接口返回的列表字段是results，不是requests
        this.games = response.data.results
        console.log(this.games)
    } catch (error) {
       console.log(error)
    }
},

2. 检查全局Axios配置 #

如果项目中全局开启了withCredentials（比如初始化Axios时设置了axios.defaults.withCredentials = true），需要针对RAWG API的请求单独覆盖该配置，或全局关闭（如果其他请求也不需要凭证）。

3. 修正API返回字段的错误 #

你的代码中使用response.data.requests赋值，但RAWG /platforms接口的平台列表实际在results字段下，requests字段不存在，这会导致this.games为undefined，必须修正字段名。

额外提示 #

如果后续仍遇到请求限额耗尽的问题，可通过浏览器开发者工具的Network面板查看请求次数，确认是否有其他代码逻辑重复调用fetchGames。

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