JSONデータのAPIへのクロス・ソース要求 - 「このファイル・タイプを処理するには適切なローダーが必要です。」

Question

WebpackとAxiosを使用しているブラウザからGenius APIからJSONデータをリクエストしようとしています。

これはクロスオリジンのリクエストですが、時には面倒です。私は次のエラーを得ていたしばらくの間：

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. 

だから私は、その後のヘッダーにAccess-Control-Allow-Origin: *を追加しました。私はnpm run buildを実行しようとする今、私は次のエラーを取得する：

以下

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

は私のアクセストークンを削除して、バンドルされているというのが私のエントリindex.jsです。私はwebpack 2.xがデフォルトでJSONを読み込むことを知っています。ここからどこへ行くべきかについてのヒント？

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

あなたheaders定義は有効なJavaScriptではありません。オブジェクトのキーに言語で予約されている特殊文字が含まれている場合は、識別子として解析されないため、引用符を付ける必要があります。たとえば、Access-ControlはAccess - Controlに相当します。これは減算であり、演算子の周囲のスペースはパーサーに違いを与えません。

*は2つのオペランド（左右）を必要とする乗算演算子なので、この値はJavaScriptでも無効です。リテラル値が必要な場合は、文字列でなければなりません。

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