Fetch API Response Code Differs from Network Tab Response Code

  fetch-api, javascript, reactjs

I’m creating a React component which is intended to check for updates to a privacy policy page, based on whether the page is cached. I’m having two issues –

  1. The response code shown by the Response object differs from the response code shown in the network tab.
  2. Less critically, the request is being sent twice, and I’m not exactly sure why. This might be a problem with my logic or caused by something else in the application.

The Code

    //Set the state to undefined initial, it'll
    const [ppChanged, setPPStatus] = useState(undefined);
    function checkPrivacyPolicyChanged(url) {
        try {
            fetch(url)
            .then(
            response => {
                console.log("Response: ", response)
                if (response.ok && response.status !== 304) {
                    //If the response code is 200-299 (ok status), and isn't cached (as indicated by status 304)
                    //Tell the component that the privacy policy has had changes since the user last saw it
                    setPPStatus(true);
                } else if (response.status == 304) {
                    setPPStatus(false);
                } else {
                    console.log(response);
                }
            },
            //Error handling
            error => {throw Error(error)}
            )
        }
        catch(err) {
            console.log(err)
        }
    }
    //If we haven't determined the privacy policy state yet, check for it. (Using manifest.json for testing purposes)
    if (ppChanged == undefined) {

        checkPrivacyPolicyChanged("/manifest.json");
    }

    let color = "green";
    //If a change to the privacy policy is detected, give a visual cue
    if (ppChanged) {color = "purple"};
    return(
        <div style={{color}}>
            {props.children}
        </div>
    );
}

The Console (Note the response codes on the right)
Console and Network Tab Output

Source: Ask Javascript Questions

LEAVE A COMMENT