Question

我使用ip-api.com/json对应用程序的加载行为进行了位置检查

组件：

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

动作创建者：

   function getUserLocation(){
        const request = axios.get("http://ip-api.com/json/");
        console.log("request", request);
        return {
            type: GET_USER_LOCATION,
            payload: request
        }
    }

减速器：

export default function(state = {}, action){
    switch(action.type){
        case GET_USER_LOCATION:
            //console.log(action.payload.data);
            console.log(action.payload);
            return state;
        default:
            return state;
    }

此API以标头Access-Control-Allow-Origin→*响应通过浏览器发出的请求，例如 http://ip-api.com/json/24.48.0.1

我已经在Firefox，Chrome和Edge上对此进行了测试。在Chrome和Edge上，请求有时会在初始加载时失败，但在刷新时将始终有效。但是，Firefox永远不会成功，并且抱怨CORS被阻止。

鉴于其他浏览器有时会出现此问题，我很难确定该问题在请求链中的何处发生。

我尝试将请求移至组件生命周期的不同步骤，结果相似。值得注意的是，我以与自己构建的其他API类似的方式发出请求，并且在任何浏览器上都看不到这些错误。

奇怪的是，此请求在我测试过的所有浏览器控制台中均失败：

fetch('https://ip-api.com/json/24.48.0.1');

axios.get在React componentDidMount中失败（CORS错误）

0 个答案: