Настройте Axios и Flask для использования CORS с файлами cookie - PullRequest
Новая
       24

Настройте Axios и Flask для использования CORS с файлами cookie

0 голосов
/ 27 июня 2018

Интерфейс работает на localhost:3000 Сервер работает на localhost:9000

Я могу отправлять запросы CORS без доступа к файлам cookie.

Пример запроса Axios 

axios.post(SERVER+'/createUser', params)
        .then( resp=>{
            //not important
        });

(работает: возможность доступа к ресурсам с другого сервера)

Мне не удалось сохранить / отправить файл cookie HttpOnly [реализация сеанса], который сервер localhost:9000 устанавливает

Ожидаемый поток процесса

Позвоните на localhost:9000/authenticate

localhost:9000/authenticate возвращает ответ с файлом cookie HttpOnly

последующие запросы к localhost:9000 переносить этот cookie

Чтобы попытаться получить доступ к этому cookie с помощью axios, я добавил заголовок withCredentials:true ссылка на документацию для axios . Для наглядности: 

let headers = {
    withCredentials:true
}
export function authenticate(creds){
    return dispatch => {
        axios.post(SERVER+'/authenticate', creds, headers)
            .then( resp => {
                //not important
            });
    };
}

После чего я получил следующую ошибку:

Не удалось загрузить http://localhost:9000/authenticate: Ответ на предварительный запрос не проходит проверку контроля доступа: значение Заголовок «Access-Control-Allow-Origin» в ответе не должен быть подстановочный знак '*', когда режим учетных данных запроса 'include'. происхождения 'http://localhost:3000', следовательно, доступ запрещен. режим учетных данных запросов, инициированных XMLHttpRequest, управляется атрибутом withCredentials.

Для ясности отправляется первый (OPTIONS) запрос, и после «успешного» ответа выдается ошибка. ВАРИАНТЫ запроса: OPTIONS REQUEST RESPONSE INFO

Мой сервер использует библиотеку Flask-Cors, после прочтения документации cookie и нескольких других ссылок, вот как сервер настроен для CORS 

... normal app init
app = Flask(__name__, static_url_path='/static')
...
cors = CORS(app, origins=["http://localhost:3000"], headers=['Content-Type'], expose_headers=['Access-Control-Allow-Origin'], supports_credentials=True)
...
@app.route('/authenticate', methods=['POST'])
def authenticate():
    ...

Я только установил метод как POST, потому что (1) документация cookie также ограничивала его POST и (2) запрос OPTIONS, по-видимому, проходит (как указано на рисунке) и (3) когда Я включаю OPTIONS в качестве возможного метода для маршрута, когда первый запрос отправляется, он входит в метод, и я понятия не имею, что возвращать, поэтому, если кто-то знает, каков правильный ответ, когда включен метод OPTIONS, пожалуйста, отправьте сообщение.

Другие ссылки

https://github.com/axios/axios/issues/569

Почему мой JavaScript получает сообщение об ошибке «Отсутствует заголовок« Access-Control-Allow-Origin »на запрошенном ресурсе», а у Postman - нет? »

CORS: невозможно использовать подстановочный знак в Access-Control-Allow-Origin, когда флаг учетных данных установлен в true

Set-Cookie заголовок не действует

1 Ответ

0 голосов
/ 31 октября 2018

Код выглядит так, как будто вы определяете withCredentials как заголовок HTTP. Но это не совсем так, как это работает.

withCredentials на самом деле опция, которая включает заголовок http, но сама по себе это не заголовок http.

Попробуйте создать обещание так: 

const axiosWithCookies = axios.create({
  withCredentials: true
});
const promise = axiosWithCookies.get(url);

Полученный заголовок http будет выглядеть следующим образом. Но вам не нужно добавлять это вручную. Об этом позаботятся, если вы создадите экземпляр axios, как указано выше. 

Cookie: JSESSIONID=...
...