使用yarn run dev运行项目时无法调用自定义API路由如何解决

这个现象是完全正常的，本质是开发环境下的跨源请求问题，具体逻辑如下：

• 相对路径请求会默认拼接当前页面的域名+端口，你本地yarn run dev启动的前端服务运行在3000端口，所以fetch('/api/config')实际请求的是http://localhost:3000/api/config，但你的后端接口部署在3500端口，3000端口没有对应的API路由，自然请求失败。
• 硬编码3500端口的写法直接指定了请求目标端口，会直接打到后端服务，所以可以正常返回结果。
• yarn run dev-server和线上环境没有问题，是因为这两个场景默认做了同源适配：dev-server一般内置了代理规则，会自动把/api前缀的请求转发到3500端口的后端服务；线上部署时通常会用Nginx等网关统一分发流量，前端静态资源和API接口都使用同一个域名端口，相对路径可以直接命中目标服务。

不需要硬编码端口，也不用为不同环境改请求逻辑，只需要给本地dev开发服务增加代理配置即可，不同开发框架的配置方式如下：

• Vue（Vite）项目：在vite.config.js中配置server.proxy，将/api前缀的请求转发到http://localhost:3500
• React（CRA）项目：在package.json中新增proxy字段，值设置为"http://localhost:3500"
• Next.js项目：在next.config.js中配置rewrites规则，将/api/*的请求代理到后端服务地址

配置完成后，本地dev环境直接使用相对路径的请求写法即可正常调用接口，不需要修改业务代码，线上环境也可以复用同一套请求逻辑。

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