1
votes

Django Rest Framework CORS bloquant XMLHttpRequest

J'ai configuré ma politique CORS à l'aide de Django-cors-headers avec les paramètres suivants:

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);
})

Je l'ai également ajoutée aux applications installées et au middleware.

Maintenant Je crée une application React pour le front-end et j'utilise AXIOS pour mes demandes d'API. Lorsque je fais une demande API pour me connecter à mon application, la politique CORS le permet. Mais, si je fais une demande d'API qui nécessite un jeton, j'obtiens:

Accès à XMLHttpRequest à 'localhost: 8000 / api / TestConnection /' à partir de l'origine ' http: // localhost: 3000 a > 'a été bloqué par la politique CORS: les demandes d'origine croisée ne sont prises en charge que pour les schémas de protocole: http, données, chrome, extension chrome, https.

Il semble que je doive autoriser XMLHttpRequest pour les schémas de protocole pris en charge mais je ne trouve rien dans la documentation pypi à ce sujet.

EDIT: Voici la requête AXIOS:

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

Merci!

javascript django django-rest-framework axios cors

1 commentaires

Fonctionne-t-il avec CORS_ORIGIN_ALLOW_ALL = False?

3 Réponses :

0
votes

J'ai eu un problème similaire avec une application ReactNative qui se produisait en raison de ReactNative utilisant l'IP 10.0.2.2 pour localhost (je ne me souviens pas des détails ni pourquoi) . Je l'ai résolu en l'ajoutant à ma classe.

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)
      });
}

Je ne sais pas si c'est la bonne adresse IP mais cela vaut la peine de la regarder.

EDIT strong>

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

En enregistrant le jeton dans mes en-têtes, il est toujours envoyé.

2 commentaires

Merci pour l'idée! Je viens d'essayer cela, cela semble casser ma fonction de connexion et l'oblige à me connecter deux fois? Ensuite, une fois que j'ai mon token, j'obtiens un 401, non autorisé. Les pensées?

Cette modification provoque l'erreur suivante: code 400, message Syntaxe de demande incorrecte ('{"headers": {"Authorization": "Bearer \\" TOKEN \\ ""}} OPTIONS / api / TestConnection / HTTP / 1.1') Où le jeton est le jeton JWT

0
votes

L'erreur dit "from origin ' http: // localhost: 3000 '" et "vérifier la politique de cors "

Je vois que votre politique CORS est

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

peut-être essayer de fournir l'url http complète. donc

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

3 commentaires

Merci pour l'idée, malheureusement, cela vient de changer l'erreur en bloquant localhost: 3000

débarrassez-vous de la liste blanche pour le moment et voyez si cela fonctionne. c'est un peu contradictoire d'avoir tout activé en plus de la liste blanche

Malheureusement, cela n'a eu aucun effet non plus.

0
votes

Je l'ai résolu! La solution était très simple (bien sûr),

Pour la demande, j'avais besoin d'utiliser une partie de la solution de @HenryM.

D'abord, je devais établir l'url par défaut:

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

Ensuite, j'enregistre la charge utile et l'en-tête dans les variables const:

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

Enfin, le principal problème était que mes paramètres étaient dans le mauvais ordre:

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

Apparemment, le bon ordre, du moins lors de l'utilisation de Django Rest Framework, est la charge utile puis l'en-tête !!!

Merci à tous ceux qui sont fatigués d'aider ! C'est l'article qui a fini par m'aider: https://www.techiediaries.com / django-vuejs-api-views /

0 commentaires