React项目中Axios请求RAWG指定ID接口被CORS策略拦截如何解决

报错原因 #

浏览器的同源策略限制了本地开发地址http://localhost:3001跨域请求RAWG的接口，游戏列表接口未触发限制是因为RAWG对不同接口路径的跨域校验规则不同，部分接口对未在白名单的跨域源直接拦截。

解决方案 #

开发环境（优先选择） #

• 配置本地代理转发
  所有前端跨域请求都可以通过本地开发服务器代理解决，不同脚手架配置方式如下：

  1. Create React App项目：直接在package.json中新增配置项：

  "proxy": "https://api.rawg.io"
  

  2. Vite项目：修改vite.config.js配置：

  import { defineConfig } from 'vite'
  export default defineConfig({
    server: {
      proxy: {
        '/api': {
          target: 'https://api.rawg.io',
          changeOrigin: true
        }
      }
    }
  })
  

  配置完成后，修改../api文件中的地址拼接逻辑，去掉https://api.rawg.io域名前缀，只保留路径部分即可。比如原地址https://api.rawg.io/api/games/${id}修改为/api/games/${id}，本地请求会自动转发到RAWG接口，不会触发跨域。

• 校验API密钥参数
  RAWG所有接口都需要携带申请的API密钥作为query参数，部分接口如果没有携带合法密钥，会先返回CORS拦截错误而非鉴权错误。检查你的gameDetailsURL、gameScreenshotURL拼接逻辑，确认已经附加了key参数，示例如下：

  const RAWG_KEY = "你申请的RAWG平台API密钥"
  export const gameDetailsURL = (id) => `/api/games/${id}?key=${RAWG_KEY}`
  export const gameScreenshotURL = (id) => `/api/games/${id}/screenshots?key=${RAWG_KEY}`
  

生产环境 #

本地代理仅在开发阶段生效，生产部署时需要：

• 在你的后端服务中新增接口转发层，前端请求自己的后端接口，由后端发起对RAWG接口的请求，再把结果返回给前端
• 如果你使用SSR框架（如Next.js），可以直接在服务端渲染阶段或者API路由中调用RAWG接口，避免前端跨域

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