Как установить "Access-Control-Allow-Credentials" на хостинге Firebase

Я установил приложение Node Express в Firebase Functions и приложение React в Firebase Hosting (похоже на созданный мной шаблон, за исключением того, что я настроил файлы cookie сеанса в экспрессе и использую Passport JS).

Мой firebase.json содержит следующее:

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "/api/**",
        "function": "app"
      }
    ]
  }
}

Если я сделаю прямой запрос на выборку из приложения React в API, используя полный абсолютный URL-адрес API, все будет работать хорошо:

try {
    const url = 'https://us-central1-[my-app-name]-app.cloudfunctions.net/app/api/v1.0/auth/status';
    const response = await fetch(url, 
      {
        method: 'GET',
        credentials: 'include',
        headers: {
          'Content-Type': 'application/json',
        },
      }
    );
    json = await response.json();
    console.info(json); // {"isAuthenticated":true}
  } catch (error) {
    throw error;
  }

API проверяет наличие пользователя в сеансе и возвращает соответствующий ответ.

Однако, если я попытаюсь получить доступ к API через прокси-сервер перезаписи, который я настроил в файле firebase.json, используя только относительный URL-адрес /api/v1.0/auth/status, я все равно получаю ответ (который подтверждает, что Firebase правильно проксирует запрос), но установлен флаг isAuthenticated на ложь, а не на истину.

Я предположил, что это связано с тем, что в проксируемом запросе отсутствует мой ценный заголовок withCredentials, поэтому я также установил это в файле firebase.json:

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "/api/**",
        "function": "app"
      }
    ],
    "headers": [
      {
        "source": "/api/**",
        "headers": [
          {
            "key": "Access-Control-Allow-Credentials",
            "value": "true"
          },
          {
            "key": "Content-Type",
            "value": "application/json"
          }
        ]
      }
    ]
  }
}

Однако, похоже, это не имеет никакого эффекта. Что-то мне не хватает?

Редактировать: При более внимательном рассмотрении я считаю, что это потому, что заголовок cookie не передается в приложение функций, когда Firebase проксирует запрос (заголовки 'учетных данных' не должны требоваться, поскольку они не перекрестного происхождения), поэтому я считаю, что должно быть каким-то образом указать Firebase включить файлы cookie в запрос на перезапись / проксирование?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
325
1

Ответы 1

Вы можете включить этот код в свою экспресс-конфигурацию. Это решит проблему корса

// allow-cors
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
    next();
});

Спасибо за ответ. Однако с экспресс-сервером проблем нет, поскольку запросы, сделанные к API непосредственно из приложения React, работают. Проблема заключается в том, что я делаю запрос на выборку из приложения React в /api/**, который Firebase прокси передает функциям app через правила перезаписи.

Craig Myles 29.10.2018 23:20

Другие вопросы по теме