Сервер и клиент имеют один и тот же хост (localhost), но разные порты (8080, 3000). Могу ли я использовать Access-Control-Allow-Credentials: true?

Question

Мой сервер работает на localhost: 8080. Мой клиент работает на localhost: 3030. Я хочу использовать httponly cook ie для установки токена refre sh для управления обновлением и истечением срока действия токена доступа JWT.

Код моего сервера выглядит так

app.use(
  cors({
    origin:
      process.env.NODE_ENV === "production"
        ? "abc.com"
        : "localhost:3000",
    credentials: true
  })
);
apolloServer.applyMiddleware({ app, path: "/graphql" });

На клиенте , У меня есть

const link = createHttpLink({
  uri: `localhost:8080/graphql`,
  credentials: "include"
});

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link
});

Как и ожидалось, я получаю эту ошибку:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/graphql. (Reason: CORS request did not succeed).

Я ожидаю этого, потому что я делаю запрос от localhost: 3000, который идет к localhost: 8080.

Теперь, если я изменю разрешение на любое происхождение, используя *,

app.use(
  cors({
    origin: process.env.NODE_ENV === "production" ? "abc.com" : "*",
    credentials: true
  })
);

, я получу Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ‘http://localhost:8080/graphql’. (Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’).

Так какой вариант у меня есть? Нет ли способа сделать запрос на учетную запись с помощью httponly cook ie, когда сервер и клиент работают на разных портах?

Answer 1

Вам необходимо указать фактическое происхождение (http://localhost:3000) в заголовке Access-Control-Allow-Origin.

Сообщение об ошибке просто сообщает вам, что подстановочный знак (*) не поддерживается.

Answer 2

Я решил использовать nginx, работающий внутри контейнера docker, в качестве прокси. И этот nginx прокси-сервер и клиент с одинаковым номером порта. Таким образом, сервер и клиент выглядят так, как будто они работают на одном и том же порту, и у нас нет проблемы с CORS.

Я использую Ubuntu, поэтому host.docker.internal пока недоступен. См. https://github.com/docker/for-linux/issues/264.

Мой docker compose выглядит так:

version: "3"
services:
  nginx:
    container_name: local-nginx
    image: nginx:latest
    ports:
      - "8000:80"
    volumes:
      - ./data/nginx/local:/etc/nginx/conf.d
    command: [nginx-debug, "-g", "daemon off;"]
    extra_hosts:
      - "host.docker.internal:172.17.0.1"

Экземпляр docker видит 172.17.0.1 в качестве IP-адреса хоста

Мой nginx конфиг выглядит так:

server 
{
    listen       80;
    server_name  localhost;

    location /
    {
        proxy_pass http://host.docker.internal:3000/;
    }    

    location /graphql
    {
        proxy_pass http://host.docker.internal:8080/graphql;
    }

    location /health
    {
        return 200 '{"message": "healthy"}';
        add_header Content-Type application/json;
    }
}

Мой клиент работает на 3000, а сервер работает на 8080. Но оба теперь проксируются через 8000.