DjangoRest + Vue+CSRF

#StandWithUkraine
Today, 2nd Октябрь 2022, Ukraine is still bravely fighting for democratic values, human rights and peace in whole world. Russians ruthlessly kill all civilians in Ukraine including childs and destroy their cities. We are uniting against Putin’s invasion and violence, in support of the people in Ukraine. You can help by donating to Ukrainian's army.

Infa

сервер :

Access-Control-Allow-Origin — данный заголовок определяет, с каких ресурсов могут приходить запросы.

Access-Control-Allow-Methods — этот заголовок определяет, какие методы могут использоваться для общения с сервером.

Access-Control-Allow-Headers — этот заголовок определяет список доступных заголовков. Например Content-Type, который позволит задать тип ответа application/json.

Access-Control-Allow-Credentials — этот заголовок определяет, разрешается ли передавать Cookie и Authorization заголовки:

X-Frame-Options: SAMEORIGIN — разрешает открывать сайт внутри iframe на страницах с тем же самым origin

клиент:

Флан withCredentials = true, для оправки авторизованых и Cookie данных.

'X-Requested-With' нужен для того, чтобы серверный скрипт мог отличить AJAX-запрос от обычного HTTP-запроса (этот способ является общепринятым и применяется в большинстве JS-библиотек, использующих AJAX).

Настройки

Django:

CORS_ALLOW_CREDENTIALS = True : 
        Если «Истина», куки-файлы будут разрешены к включению в  межсайтовые HTTP-запросы. По умолчанию False.

CORS_ORIGIN_WHITELIST = = (
    '127.0.0.1:8080',
)

Vue.js:

1. Variant (axios)

При настройке сервере

    'DEFAULT_AUTHENTICATION_CLASSES':'rest_framework.authentication.SessionAuthentication'

Авторизация пользователя:

axios.create({withCredentials: true}).post('http://ip:8080/rest-auth/login/', cr).then((response) => {
      localStorage.setItem('token', response.data.token)
 }, (err) => {
      console.log(err)
 })

доступ к закрытому ресурсу:

axios.create({withCredentials: true}).get('http://IP:8080/rest-auth/user/').then(( 
     console.log(response.data)
   }, (error) => {
     console.log(error)
   })

2. Variant

Выбор на сервере

При настройке сервере

    'DEFAULT_AUTHENTICATION_CLASSES':'rest_framework.authentication.TokenAuthentication'

С предыдущими настройка на клиенте Header, будет ошибка следующего вида:

                401 (Unauthorized)

запрос login: будет как в 1 variante;

запрос к защищенному ресурсу:

    axios.defaults.headers.Authorization = 'Token ' + localStorage.getItem('token')

    axios.get('http://IP:8000/rest-auth/user/').then((response) => {
            console.log('girr')
            console.log(response.data)
    }, (error) => {
            console.log(error)
    })

Без всяких withCredentials!

3. Variant

Использование на сервере библиотеки jwt-auth

Настройки

     REST_USE_JWT = True
    'DEFAULT_AUTHENTICATION_CLASSES':  'rest_framework_jwt.authentication.JSONWebTokenAuthentication'

На клиенте

Запрос авторизации как в 1 variante.

Доступ к защищенному ресурсу

        axios.defaults.headers.Authorization = 'JWT ' + localStorage.getItem('token')

        axios.get('http://IP:8000/rest-auth/user/').then((response) => {
           console.log('girr')
           console.log(response.data)
        }, (error) => {
              console.log(error)
        })

Без всяких withCredentials!

#django #rest #vue #csrf
1
Barolina Barolina фотография профиля
Ноя 10, 2017
по Barolina Barolina
Вам помог этот хинт?
Да !
Нет

Лучшие по теме