CODEWITHSUNDEEP
javascriptpromisefetch-api
Dmitry Pavlushin
Dmitry Pavlushin

Reputation: 612

Resolved fetch throws console error 401

My fetch logs console error, despite of being resolved with 401 Unauthorized

componentWillMount() {
    this.setState({ isInitializing: true });
    fetch('/api/users/getcurrent')
        .then(resp => {
            console.log('resolved');
            if (resp.status == 200) {
                // do stuff
            }
            this.setState({ isInitializing: false });
        })
        .catch(err => {
            console.log('catched');
            this.setState({ isInitializing: false });
        });
}

enter image description here

Is that the intended behavior of fetch? I do not see anything related to throwing error upon 401 on MDN or anywhere else. Console record is a legitimate error. I am not using any pakgages of polyfills for fetch. Chrome version is 63.0.3239.108.

Upvotes: 0

Views: 5612

Answers (4)

Hems
Hems

Reputation: 1

This happens because CORS headers are missing from response. I made it to work as expected by adding the following:

@Component
public class CORSHeadersToUnauthorizedResponseFilter extends OncePerRequestFilter {

    @Override
    protected void doFilterInternal(HttpServletRequest httpServletRequest,
                                    HttpServletResponse httpServletResponse,
                                    FilterChain filterChain) throws IOException, ServletException {

        filterChain.doFilter(httpServletRequest, httpServletResponse);

        if(httpServletResponse.getStatus() == HttpStatus.UNAUTHORIZED.value() ) {

            httpServletResponse.addHeader("Access-Control-Allow-Credentials", "true");
            httpServletResponse.setHeader("Access-Control-Allow-Origin", httpServletRequest.getHeader("origin"));
        }


    }
}

Upvotes: 0

Ramses Alexander Coraspe
Ramses Alexander Coraspe

Reputation: 79

Please set your header in your code server.

 res.header('Access-Control-Allow-Origin','*');
 res.header('Access-Control-Allow-Headers', 'Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Request-Method');
 res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
 res.header('Allow', 'GET, POST, OPTIONS, PUT, DELETE');

Upvotes: 0

hawi
hawi

Reputation: 211

This actually has nothing much in common with fetch itself. Chrome Dev tools in default logs HTTP errors (4xx and 5xx status) in console as stated in Additional settings section here. So your fetch promise can be successfully resolved and you only see browser log which can be turned off.

Upvotes: 2

Devan Buggay
Devan Buggay

Reputation: 2759

Fetch is working as intended. You got a valid response back from the server it is just that this endpoint is expecting some kind of authorization and sent back a response with a status code of 401.

The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing.

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/401

Upvotes: 2

Related Questions