如何解决这个错误？ xhr.js:178 获取 https://www.googleapis.com/youtube/v3/search?q=Tesla 403

Question

我在控制台中收到此错误。

xhr.js:178 GET https://www.googleapis.com/youtube/v3/search?q=river 403

我创建了一个单独的组件供以后使用这个 api：

const KEY = "mykeyas23d2sdffa12sasd12dfasdfasdfasdf";

export default axios.create({
  baseURL: "https://www.googleapis.com/youtube/v3",
  params: {
    part: "snippet",
    maxResults: 5,
    key: KEY,
  },
});

然后在App.js 调用：

import youtube from "../apis/youtube";

class App extends React.Component {
  handleQuery = (term) => {
    youtube.get("/search", {
      params: {
        q: term,
      },
    });
  };
  ...
}

但是，当我将它们放在一起时。喜欢：

class App extends React.Component {
  handleQuery = (term) => {
    console.log(term);
    axios.get("https://www.googleapis.com/youtube/v3/search", {
      params: {
        part: "snippet",
        maxResults: 5,
        key: "mykeyas23d2sdffa12sasd12dfasdfasdfasdf",
        q: term,
      },
    });
  };

  render() { ... }
}

export default App;

上面的代码可以正常工作，但首先不能。如何解决该单独组件的错误？

Answer 1

不幸的是，axios 从版本0.18x 到0.19x 进行了一些更改，并对能够使用axios.create() 发送axios 实例的功能进行了更改。

这意味着您不能导出默认的 axios 配置并导入它，至少在功能发布之前是这样。对你来说，这导致了403 错误，因为由于我提到的修改，axios 没有事先了解../api/youtube 中定义的配置。

这是根据这个github问题：axios.create() can't not handle params

解决您的问题的方法是将您的配置文件定义为 api/config 为：

export const config = {
  baseURL: 'https://www.googleapis.com/youtube/v3',
  params: {
    part: 'snippet',
    maxResults: 5,
    key: YOUR_API_KEY,
  },
};

并在您的App.js 中使用它作为：

import React from 'react';
import axios from 'axios';
import { config } from './apis/config';

class App extends React.Component {
   handleQuery = async (term) => {
      console.log(term);
      config['params'] = { ...config['params'], q: term };
      const response = await axios.get('/search', config);
      console.log(response);
   };
   return (...)
}

*我所做的是连接到导入的config q 值。这很容易在 javascript 中使用 {...config, key:value} 完成。 ... 的意思是：像以前一样从配置中复制所有内容。

编辑

您的配置对象应如下所示（设置q 参数后）：