Demande d'origine croisée à l'API pour les données JSON - "Vous pouvez avoir besoin d'un chargeur approprié pour gérer ce type de fichier."

Question

J'essaie de demander des données JSON à partir de l'API Genius à partir d'un navigateur utilisant Webpack et Axios.

Il s'agit d'une demande d'origine croisée, que je sais parfois difficile. Pendant un certain temps, je recevais l'erreur suivante:

Failed to load https://api.genius.com/songs/378195: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403. 

Je puis ajouté Access-Control-Allow-Origin: * aux en-têtes. Maintenant, je reçois l'erreur suivante lorsque je tente de lancer npm run build:

You may need an appropriate loader to handle this file type. 
| const headers = { 
| Authorization: `Bearer ${ACCESS_TOKEN}`, 
| Access-Control-Allow-Origin: * 
| }; 
| 

Voici mes index.js d'entrée qui est fourni, avec mon jeton d'accès retiré. Je sais que webpack 2.x^charge JSON par défaut. Des conseils sur où aller à partir d'ici?

index.js

const axios = require('axios'); 

const ACCESS_TOKEN = "XXXXXXXXXXXXXX"; 
const id = '378195'; 
const url = `https://api.genius.com/songs/${id}` 
const headers = { 
    Authorization: `Bearer ${ACCESS_TOKEN}`, 
    "Access-Control-Allow-Origin": "*" 
}; 

window.newSong = function { 
    axios.get(url, { headers }) 
    .then(response => { 
     console.log(response.data.response.song); 
    }) 
    .catch(error => { 
     console.log(error); 
    }); 
} 

webpack.config.js

const path = require('path'); 

const config = { 
    entry: './src/index.js', 
    output: { 
     filename: 'bundle.js', 
     path: path.resolve(__dirname, 'dist') 
    } 
}; 
module.exports = config; 

Answer 1

Votre headers définition n'est pas JavaScript valide. Si la clé d'un objet contient des caractères spéciaux qui sont réservés dans la langue, vous devez le citer, car il n'est pas analysé en tant qu'identifiant. Par exemple: Access-Control est équivalent à Access - Control, c'est une soustraction et les espaces autour de l'opérateur ne font pas de différence pour l'analyseur.

La valeur que vous lui attribuez n'est pas non plus un code JavaScript valide, car * est l'opérateur de multiplication, qui attend deux opérandes (gauche et droite). Si vous voulez la valeur littérale, cela devrait être une chaîne.

const headers = { 
    Authorization: `Bearer ${ACCESS_TOKEN}`, 
    "Access-Control-Allow-Origin": "*" 
};