Django Rest Framework CORS блокирует XMLHttpRequest - PullRequest
Новая
       7

Django Rest Framework CORS блокирует XMLHttpRequest

1 голос
/ 11 марта 2019

Я настроил свою политику CORS, используя Django-cors-headers со следующими настройками: 

APPEND_SLASH=False
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
    'localhost:8000',
    'localhost:3000',
    'localhost'
)

Я также добавил его в установленные_папки и промежуточное ПО.

Сейчас я делаю приложение React для внешнего интерфейса и использую AXIOS для своих запросов API. Когда я делаю запрос API для входа в мое приложение, политика CORS позволяет это. Но если я сделаю запрос API, который требует токен, я получу:

Доступ к XMLHttpRequest по адресу 'localhost: 8000 / api / TestConnection /' from origin 'http://localhost:3000' заблокирован политикой CORS: запросы на разные источники поддерживаются только для схем протоколов: http, data, chrome, chrome расширение, https.

Кажется, мне нужно разрешить XMLHttpRequest для поддерживаемых схем протоколов, но я не могу найти ничего в документации pypi по этому поводу.

EDIT: Вот запрос AXIOS: 

axios.post("localhost:8000/api/TestConnection/",
    {headers:
      {
          'Authorization': "Bearer " + localStorage.getItem('JWTAccess')
      }
    },
    { 
      testString: 'Hello API'
    })
    .then(response => {
      console.log(response)
      })
    .catch(error => {
      console.log(error);
})

Спасибо!

Ответы [ 3 ]

0 голосов
/ 11 марта 2019

В сообщении об ошибке указано «от источника» http://localhost:3000'" и «проверить политику cors»

Я вижу, что ваша политика CORS 

CORS_ORIGIN_WHITELIST = (
    'localhost:8000',
    'localhost:3000',
    'localhost'
)

, возможно, попробуйте предоставить полныйhttp URL так 

CORS_ORIGIN_WHITELIST = (
    'localhost:8000',
    'http://localhost:3000',
    'localhost'
)
0 голосов
/ 12 марта 2019

Я решил это! Решение было очень простым (конечно),

Для запроса мне нужно было использовать часть решения @HenryM.

Сначала мне нужно было установить URL по умолчанию: 

axios.defaults.baseURL = 'http://127.0.0.1:8000/api/';

Затем я сохраняю полезную нагрузку и заголовок в константные переменные: 

const header = {
  headers:{
    'Authorization': "Bearer " + localStorage.getItem('JWTAccess')
  }
}
const payload = {
  testValue: "Hello API"
}

Наконец, главная проблема заключалась в том, что мои параметры были в неправильном порядке: 

axios.post("TestConnection/", payload, header)
    .then(response => {
      console.log(response)
      })
    .catch(error => {
      console.log(error);

Очевидно, что порядком пропперов, по крайней мере, при использовании Django Rest Framework, является полезная нагрузка, а затем заголовок !!!

Спасибо всем, кто устал помогать! Это была статья, которая помогла мне: https://www.techiediaries.com/django-vuejs-api-views/

0 голосов
/ 11 марта 2019

У меня была похожая проблема с приложением ReactNative, которое происходило из-за ReactNative, использующего IP 10.0.2.2 для локального хоста (я не помню подробности или почему). Я решил это, добавив в свой класс. 

  componentWillMount() {
    axios.defaults.baseURL = 'http://10.0.2.2:8000/api/';
    axios.defaults.timeout = 1500;
  }

Я не знаю, правильный ли это IP, но стоит посмотреть.

EDIT 

handleRequest() {
    const payload = { username: this.state.username, password: this.state.password } 
    axios
      .post('login/', payload)
      .then(response => {
        const { token, user } = response.data;

        // We set the returned token as the default authorization header
        axios.defaults.headers.common.Authorization = `Token ${token}`;

        // Navigate to the home screen
        Actions.main();
      })
      .catch(error => {
            console.log(error)
      });
}

Сохраняя токен в моих заголовках, он всегда отправляется.

...