React Authorization Header Not Working

Question

I am currently working in oAuth Authentication which is working fine in rest client.

but showing error in React Js (401). The code of react is :

let UserAPI = {

    login(username, password){
        const requestOptions = {
            method: 'POST',
            headers: {'Authorization': 'Basic ' + btoa('livechat-api-client:livechat'), 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8' },
            body: `username=${username}&password=${password}&grant_type=password`
        };
        return fetch('http://localhost/cronos/oauth/token', requestOptions)
            .then(response => {
                if (!response.ok) {
                    return Promise.reject(response.statusText);
                }
                return response.json();
            })
            .then(user => {
                // login successful if there's a jwt token in the response
                if (user && user["access_token"]) {
                    // store user details and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('user', JSON.stringify(user));
                }
                return user;
            });
    }
}

export default UserAPI;

i am getting 401 error, i think authorization header not working — shree, Jan 28 '18 at 10:38
Do you see Access-Control-Allow-origin header not present message in the error — Shubham Khatri, Jan 28 '18 at 10:39
Same process is working fine in rest client but in react 401 error occurs, In server side there is no error so i think some mistake in react — shree, Jan 28 '18 at 10:41
I am pretty sure its a cors issue , check this https://stackoverflow.com/questions/36554013/cors-issue-doesnt-occur-when-using-postman. also what language are you using for your backend — Shubham Khatri, Jan 28 '18 at 10:45
I am using java spring for backend. where i use cors filter too but if error is due to cors what can we do to resolve error sir ? — shree, Jan 28 '18 at 10:47
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/164038/discussion-between-shree-and-shubham-khatri). — shree, Jan 28 '18 at 12:00

score 1 · Answer 1 · answered Jan 29 '18 at 06:02

Thanks all this issue is of cors. I have added cors filter in spring app and allow options in spring security.

Added new filter

 @Component
    @Order(3)
    public class CorsFilter implements Filter {

        public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
            final HttpServletResponse response = (HttpServletResponse) res;
            response.setHeader("Access-Control-Allow-Origin", "*");
            response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
            response.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Type");
            response.setHeader("Access-Control-Max-Age", "3600");
            if ("OPTIONS".equalsIgnoreCase(((HttpServletRequest) req).getMethod())) {
                response.setStatus(HttpServletResponse.SC_OK);
            } else {
                chain.doFilter(req, res);
            }
        }

        @Override
        public void destroy() {
        }

        @Override
        public void init(FilterConfig config) throws ServletException {
        }
    }

In spring security I ignore OPTIONS http method

@Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring().antMatchers(HttpMethod.OPTIONS, "/oauth/token");
}

React Authorization Header Not Working

1 Answers1