Question

您好，我正在将 axios 与 react 一起使用，但我在第一次请求时遇到了问题。每次我的网站完全刷新时，它都会向服务器发出两个请求：

加载网络全局内容
孩子应该加载当前页面相关的内容

但是，当我刷新页面时，由于在 App.js compontDidMount 中加载了网络全局内容，因此加载了全局内容，但是对于 HomePage.js，在这种情况下是App.js 的子组件在 compontDidMount 中发送请求，但检查服务器日志，仅收到 option 握手请求，而不是实际的 get request 以获取页面相关内容，但是因为我使用 react-router-dom's Link 导航。如果我导航到另一个页面然后返回主页，那么我将获得所有内容，因为在这种情况下，App.js compontDidMount 将不会被执行。任何人都可以帮助或解释为什么会发生这种情况

我的hoempage.js componentDidMount 看起来像这样

axios.defaults.xsrfCookieName="csrftoken"
axios.defaults.headers = get_headers()
axios.get(`${API_URL}/dns/`).then(res=>{
       this.setState({
           top6:res.data.top,
           latest:res.data.latest
        })
    })

我的 App.js componentDidMount 正在调用另一个更新 redux 的文件中的函数，看起来像这样

componentDidMount() {
    this.props.loadGlobal();
}

loadGlobal 看起来像这样

export const getGlobal = () => {
return dispatch => {
    dispatch(getGlobalStart());
    axios.defaults.xsrfCookieName = "csrftoken";
    axios.defaults.headers = get_headers();
    axios.get(`${API_URL}/api/get-global/`)
        .then(res => dispatch(getGlobalSuccess(res.data)))
        .catch(err => {
            console.log(err.message)
            dispatch(getGlobalFail(err.response.data))

        }).catch(err=>{
            dispatch(setAlert({ "show": true, error: true, "message":"network error fetching data, check your internet and try again or contact side admin if your network is fine"}))
        });
};
};

我的get_headers()看起来像这样

function get_headers() {
   var headers = {
       "Content-Type": "application/json",
   };
  if (localStorage.getItem('token')) {
      headers = {
          "Content-Type": "application/json",
          "Authorization": `Token ${localStorage.getItem('token')}`,
     };
  }
  return headers
}

我的后端正在使用 django，它从邮递员那里获取数据甚至访问 url 对我来说都很好

axios 中的第一个请求没有取回数据

0 个答案: