Express React cookie issues

Question

Итак, я создаю приложение на основе NodeJS с express4 как бэкэнд и интерфейс React. Бэкэнд в настоящее время позволяет пользователю входить в систему и создавать событие. Эта функциональность была проверена с помощью Postman и работает отлично.

Теперь в интерфейсе мой бэкенд говорит мне, что я несанкционирован. Довольно забавно, когда я использую расширение chrome для замены сохраненного файла cookie (в браузере для интерфейса) cookie из Postman, он неожиданно работает. Так что-то с печеньем должно идти не так.

//Session used in express 
app.use(session({ 
    resave: true, 
    saveUninitialized: true, 
    secret: process.env.SESSION_SECRET, 
    store: new MongoStore({ 
    url: process.env.MONGODB_URI || process.env.MONGOLAB_URI, 
    autoReconnect: true 
    }), 
    name: 'UsE' 
})) 

Фронтэнд затем использует fetch polyfill, чтобы сделать запрос на вход.

export const loginAction = (email, password) => { 
    return dispatch => { 
    dispatch(startLoginFetching()) 
    return fetch(baseURL + '/api/login', { 
      method: 'POST', 
      headers: { 
       'Accept': 'application/json', 
       'Content-Type': 'application/json' 
      }, 
      body: JSON.stringify({ 
       email, 
       password 
      }) 

    }).then(response => { 
     if(response.ok) { 
      dispatch(loginUser()) 
      dispatch(push('/home')) 
     } 

     //Read the JSON stream and return it's promise. 
     return response.json() 
    }).then(json => { 
     if(json.msg) { 
      dispatch(displayToast(json.msg)) 
     } 
     if(json.user) { 
      dispatch(updateUser(json.user)) 
     } 
     dispatch(endLoginFetching()) 

    }) 
    } 
} 

Затем бэкэнд использует паспорт для аутентификации пользователя, и все должно быть в порядке. Я совершенно не понимаю, что здесь может быть проблемой.

Вот код, обратившийся к бэкэнд, который получает обратно 401.

export const createEvent = (infos) => (dispatch) => { 
    dispatch(startFetching('createEvent')) 
    return fetch(baseURL +'/api/event', { 
     method: 'POST', 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json' 
     }, 
     credentials: 'include', 
     body: JSON.stringify(infos) 
    }) 
    .then(response => response.json()) 
    .then(json => { 
     if (json.msg) { 
      dispatch(displayToast(json.msg)) 
     } 
     if(json.event) { 
      dispatch(addEvent(json.event)) 
      dispatch(push(`/event/${json.event._id}`)) 
     } 
     dispatch(endFetching('createEvent')) 
    }) 
} 

Answer 1

По умолчанию fetch polyfill does not pass along cookies to the server. К send cookies с запросами, сделанными в том же самом происхождении, вам необходимо указать credentials: 'same-origin' в параметрах, которые вы передаете fetch().

Ваш обновленный код должен выглядеть следующим образом:

fetch(baseURL + '/api/login', { 
      method: 'POST', 
      credentials: 'same-origin', 
      headers: { 
       'Accept': 'application/json', 
       'Content-Type': 'application/json' 
      }, 
      body: JSON.stringify({ 
       email, 
       password 
      }) 

}).then(response => { // ...