Cors manquant autorise l'origine

Question

Mon serveur (écrit avec Django) fonctionne à http://localhost:8000.

L'application Nuxt fonctionne à http://localhost:3000.

Quand j'envoie une demande (comme http://localhost:8000/api/v1/user/position/) Pour le serveur, j'obtiens l'erreur suivante dans le navigateur firefox.

Demande d'origine croisée bloquée: La même stratégie d'origine désactive la lecture de la ressource distante à l'adresse http: // localhost: 8000/API/V1/Utilisateur/Position /. (Raison: l'en-tête Cors 'ACCESS-CONTRÔLE-INTERMORT-ORIGINE' MANAIS).

Firefox:

Chrome:

J'ai vu - ce lien et ceci mais je ne sais pas où vient le problème?

Ci-dessous une partie de mon nuxt.config.js déposer.

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
],
axios: {
    baseURL: 'http://localhost:8000/api/v1/', 
},

Et fonction que j'envoie une demande:

async getAllPosition() {
    this.loading_position = true;
    await this.$axios.get('user/position/').then(response => {
          this.position = response.data;
    }).finally(() => {
         this.loading_position = false;
        })
 }

Je pense que c'est à propos de la proxy, mais je ne sais pas comment la configurer.

Answer 1

Comme @tmflgrgr mentionné: ajoutez un gestionnaire de demande d'option à votre serveur et spécifiez un Access-Control-Allow-Origin Header. Le proxy est bien pour le développement mais en production, vous ne devriez pas faire cela.