React授权头不工作

Question

我目前在oAuth身份验证中工作，它在rest客户机中工作得很好。

​

​

，但在反应Js (401)中显示错误。react的代码是:

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;

Answer 1

谢谢所有这些问题都是关于cors的。我在spring应用程序中增加了cors过滤器，并允许春季安全选项。

添加了新的过滤器

 @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 {
        }
    }

在春季安全性中我忽略选项http方法

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