Infa

сервер :

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

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

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

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

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

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