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

node.js React.js

村村番长

2020-03-24

我目前正在将现有应用程序从create-react-app切换到next.js,除了我的api端点在端口4000上的另一个节点应用程序上运行之外,其他一切似乎都能正常运行,而我无法从next.js应用程序访问。我遵循了仓库中的示例,但是我无法使其正常工作。在生产中,我毫无疑问地使用nginx作为反向代理,但是我处于开发模式。要使用Redux设置Apollo,请遵循以下示例:with-apollo-and-redux,对于代理,我将本示例-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);
      });

第3481篇《请求以开发模式localhost从Next.js应用程序在不同端口上运行的Graphql API》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
西里小宇宙 2020.03.24

好吧,我终于发现了,被这个问题涉及Next.js或阿波罗的客户端。但是,这全都与我的服务器在端口4000上运行(我的graphql服务器)有关。我必须处理CORS和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/"
    })

而已

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android