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。 关于从这里去哪里的任何提示？

索引.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": "*"
};

Answer 2

看起来您正在构建一个仅限客户端的应用程序。 在这种情况下，我发现通过 auth 标头传递访问令牌不起作用。 但是使用查询参数可以。

我不确定为什么在撰写本文时，文档没有明确提及这一点。

使用访问令牌

要使用访问令牌发出经过身份验证的请求，请将其包含在 HTTP Authorization标头中，并以单词“Bearer”和一个空格开头。 例如，标头的值可以是Bearer 1234tokentokentoken 。

在授权标头中传递令牌是验证 API 请求的首选方式。 但是，API 还支持将令牌作为GET请求的access_token查询参数或POST正文的元素提供。

所以请求的 url 应该类似于：

https://api.genius.com/songs/${id}?access_token=${ACCESS_TOKEN}