Nginx + GraphQL连接被拒绝

Question

1. 我的客户端（next.js）应用在端口3000上运行

2. 我的服务器（graphql）应用程序在端口4000上运行

我的网站是https://example.com，nginx将通过代理端口3000。

如果用户访问该站点，则页面已成功加载。

但是在幕后，在我的网页中，一些api请求被发送到graphql服务器。 (http://localhost:4000)

此api请求失败。

我不知道为什么，但是当我访问http://example.com:4000/graphql时，graphql游乐场（graphiql？）成功加载，我可以发送一些查询，结果显示良好。但是来自网页的请求失败。

nginx / sites-enabled / example.com

server {
        listen 80;
        listen [::]:80;
        server_name www.example.com example.com;
        return 301 https://example.com$request_uri;
}


server {
    listen 80;
    listen [::]:80;
    server_name example.com;


    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

客户端应用的graphql部分

export default function createApolloClient(initialState, ctx) {
  return new ApolloClient({
    ssrMode: Boolean(ctx),
    link: authLink.concat(new HttpLink({
      uri: 'http://localhost:4000/graphql', // Server URL (must be absolute)
      credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
      fetch,
    })),
    cache: new InMemoryCache({ fragmentMatcher }).restore(initialState),
    credentials: 'include',
  })
}

**我尝试了什么... **

我在代码片段下面添加了到nginx conf（在侦听[::] 443部分之上，并重新启动了nginx服务，但没有任何改变。

   location /graphql {
        proxy_pass http://localhost:4000/graphql;
   }

我想我错过了Nginx conf中的某些内容。我该如何解决？

Answer 1

我决定如下。

createApolloClient

... createApolloClient(initialState, ctx) {
  return new ApolloClient({
    ...
    link: createHttpLink({ uri: '/graphql' })

nginx

  location /graphql {
        proxy_pass http://localhost:4000/graphql;
   }