在开发模式 localhost 中从 Next.js 应用程序请求在不同端口上运行的 Graphql api答案

【问题标题】：Request Graphql api running on different port from Next.js app in development mode localhost在开发模式 localhost 中从 Next.js 应用程序请求在不同端口上运行的 Graphql api
【发布时间】：2023-03-04 03:20:01
【问题描述】：

我目前正在将我现有的应用程序从 create-react-app 切换到 next.js，除了我的 api 端点在端口 4000 上的另一个节点应用程序上运行之外，一切似乎都正常工作，我无法从我的 next.js 应用程序访问它。我按照 repo 中的示例进行操作，但无法使其正常工作，在生产中，我使用 nginx 作为反向代理没有问题，但我处于开发模式。为了使用 Redux 设置 Apollo，我遵循了这个例子：with-apollo-and-redux，对于代理，我使用了这个例子 with-custom-reverse-proxy

我知道，我做错了，我现在想不通

在 initApollo.js 中

...    
function create() {
      return new ApolloClient({
        ssrMode: !process.browser,
        networkInterface: createNetworkInterface({
          uri: "/api" 
        })
      });
    }
...

在 server.js 中

...    
const devProxy = {
      "/api/": {
        target: "http://localhost:4000/api/",
        changeOrigin: true
      }
    };

    app
      .prepare()
      .then(() => {
        const server = express();

        if (dev && devProxy) {
          const proxyMiddleware = require('http-proxy-middleware')
          Object.keys(devProxy).forEach(function (context) {
            server.use(proxyMiddleware(context, devProxy[context]))
          })
        }

        server.all("*", (req, res) => handle(req, res));

        server.listen(3000, err => {
          if (err) throw err;
          console.log("> Ready on http://localhost:3000");
        });
      })
      .catch(ex => {
        console.error(ex.stack);
        process.exit(1);
      });

【问题讨论】：

如果有人能提供教程或文章的链接也很好

标签： node.js express react-apollo apollo-client next.js

【解决方案1】：

好的，我终于找到了与 Next.js 或 Apollo 客户端不相关的问题。但相反，这完全是关于我在端口 4000 上运行的服务器（我的 graphql 服务器）。我不得不处理 CORS，以及我认为默认不支持的 express middlware express-graphql。

所以我将以下内容添加到运行 graphql 的服务器中

app.use("/api", function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Content-Type, Authorization, Content-Length, X-Requested-With"
  );
  if (req.method === "OPTIONS") {
    res.sendStatus(200);
  } else {
    next();
  }
});

而且在 apollo 客户端中，我必须将绝对路径放入我的 api 服务器

networkInterface: createNetworkInterface({
      uri: "http://localhost:4000/api/"
    })

就是这样

【讨论】：