Как отправить данные, используя выборку и запрос POST с учетными данными? - PullRequest
Новая
       17

Как отправить данные, используя выборку и запрос POST с учетными данными?

0 голосов
/ 11 апреля 2019

Я хочу отправить некоторые данные в формате JSON из моего внешнего интерфейса React на порт 3000 с помощью fetch на мой сервер node.js на 3005. Я настраивал cors на своем сервере, но каждый раз, когда я пытаюсь отправить запрос с файлами cookie, Chrome выдает ошибку:

Доступ к выборке в 'http://localhost:3005/user-connected' из источника' http://localhost:3000' заблокирован политикой CORS: Ответ на предпечатный запрос не проходит проверку контроля доступа: значение 'Access-Control Заголовок -Allow-Origin 'в ответе не должен быть подстановочным знаком' * ', если режим учетных данных запроса' include '.

Все console.log из кода сервера пропускаются.

Когда я удаляю заголовок из кода извлечения

"Content-Type", "application / json"

Я получаю куки, но без данных. С включенным заголовком, но без учетных данных: «include», я могу получить свои данные, но никогда не получу оба одновременно.

Вот мой код получения: 

fetch("http://localhost:3005/user-connected", {
            mode: "cors",
            method: "post",
            headers: [
                ["Content-Type", "application/json"],
            ],
            credentials: "include",
            body: JSON.stringify({data: "123"})
        })
            .then(data => data.json())
            .then((data) => {
               console.log(`Response: ${JSON.stringify(data)}`);
            }).catch(err => {
                console.log(`Error: ${err}`)
        });

Конфигурация cors Node.js: 

app.use(cors({credentials: true}));

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type', 'Access-Control-Allow-Origin', 'Origin');
  res.setHeader('Access-Control-Allow-Credentials', true);
  next();
});

И мой пост маршрут: 

let cookiesData = (req, res) => {
  console.log(`Cookie user-connected: ${req.cookies.io}`)


  console.log(`Received data: ${JSON.stringify(req.body)}`);
  res.send({ status: "OK" });
}

router.post("/user-connected", cors({origin: 'http://localhost:3000'}), cookiesData);

Возможно ли вообще делать то, что я хочу? Или, может быть, я пропустил какую-то важную конфигурацию?

Ответы [ 3 ]

0 голосов
/ 11 апреля 2019

Всякий раз, когда возникает ошибка во время соединений между внешним и внутренним интерфейсом, обычно хорошей идеей является разделение проблемы на эти стороны, поэтому сначала давайте полностью проигнорируем внешний интерфейс. Вместо этого мы можем запросить серверную часть с помощью curl или Postman , с помощью которой вы можете получить представление о том, что на самом деле возвращает сервер.

Теперь в вашем случае предполетный запрос CORS учитывается, и его можно проверить, правильно ли он настроен, отправив запрос OPTIONS на конкретный путь к серверу.

Затем вы обнаружите, что Подстановочные знаки и учетные данные не могут использоваться одновременно .

Теперь, если вы измените параметры cors({ ... }) на самом маршруте, вы обнаружите, что это не влияет на возвращаемый фактический заголовок OPTIONS. То есть, поскольку первый cors() завершит все запросы OPTION и ответит с помощью конфигурации uts, все дальнейшие промежуточные программы cors() ничего не изменят.

Поэтому вам следует либо добавить глобальный обработчик cors: 

  app.use(cors({origin: 'http://localhost:3000', credentials: true }));
 // don't use cors() again!

или (что, вероятно, лучше, так как позволяет осуществлять тонкодисперсный контроль доступа), добавить настройку cors для каждого маршрута самостоятельно: 

 app.use("/route", cors({origin: 'http://localhost:3000'}));
 app.get("/route", (req, res) => { /*...*/ });

Вы также можете добавить его в маршрутизатор, чтобы политика cors влияла только на определенный путь.

0 голосов
/ 11 апреля 2019

вам нужно передать такие заголовки в запросе на выборку для метода post: 

{
  credentials: 'include',
  mode: 'cors',
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
}

Вы должны быть уверены, что вы предоставили доступ разрешить источник для localhost: 3000

0 голосов
/ 11 апреля 2019

попробуйте использовать заголовки как объект: 

headers: {
    "Content-Type": "application/json",
},

документация Ссылка на выборку - Заголовки показывает примеры с объектом, а не массивами

...