javascript - 对 API 的 JSON 数据的跨源请求 - "You may need an appropriate loader to handle this file type."

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: * 添加到 header 中。现在，当我尝试运行 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，其中删除了我的访问 token 。我知道 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，这是一个减法，运算符周围的空格对解析器没有影响。

您给它的值也不是有效的 JavaScript，因为 * 是乘法运算符，它需要两个操作数(左和右)。如果您想要文字值，那么它应该是一个字符串。

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