Vue3项目DevServer代理未转发GraphQL请求问题求助

1. 修正代理配置的路径与Target格式 #

你的代理配置中，target末尾的斜杠会导致转发路径出现重复斜杠（http://localhost:3000//graphiql），可能引发服务器识别异常。同时调整匹配规则的写法，让代理逻辑更清晰：

devServer: {
  port: "8080",
  proxy: {
    "/graphiql": {
      target: "http://localhost:3000", // 移除末尾斜杠
      changeOrigin: true,
      // 如果GraphQL服务器实际处理请求的路径是/graphql，需添加路径重写：
      // pathRewrite: { '^/graphiql': '/graphql' }
    },
  },
},

2. 验证代理是否实际拦截请求 #

打开Chrome开发者工具的Network面板：

• 查看请求的Request URL，确认是否为localhost:8080/graphiql；如果是，说明代理未生效；如果是localhost:3000/graphiql仍报CORS，问题出在服务器端配置。
• 检查请求头中的Host字段，开启changeOrigin: true后应该显示localhost:3000，否则说明代理配置未被正确加载。

3. 确认vue.config.js的有效性 #

• 确保vue.config.js放在项目根目录，而非src等子目录。
• 修改配置后必须重启Vue开发服务器，否则新配置不会生效。

4. 检查GraphQL端点路径是否正确 #

通常/graphiql是GraphQL的可视化调试界面，实际处理API请求的端点是/graphql。如果你的服务器仅在/graphql接收请求，需要同步调整两处代码：

// request.ts中修改ApolloClient的uri
const apolloClient = new ApolloClient({
  connectToDevTools: true,
  uri: "/graphql", // 替换为实际API端点
  cache,
});

// vue.config.js中同步修改代理规则
proxy: {
  "/graphql": {
    target: "http://localhost:3000",
    changeOrigin: true,
  },
}

5. 排查其他干扰因素 #

• 检查项目中是否存在HTTP拦截器（如自定义ApolloLink、axios拦截器）修改了请求路径。
• 按Ctrl+Shift+R强制刷新页面，排除浏览器缓存对请求的影响。

内容的提问来源于stack exchange，提问作者Alici-EdOna