出现跨域问题,一开始以为是后端的问题,但后端确实配置了跨域:

@Order(Ordered.HIGHEST_PRECEDENCE)
@Configuration
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        //允许所有的域访问
        response.setHeader("Access-Control-Allow-Origin", "*");
        //允许所有方式的请求
        response.setHeader("Access-Control-Allow-Methods", "*");
        //头信息缓存有效时长(如果不设 Chromium 同时规定了一个默认值 5 秒),没有缓存将已OPTIONS进行预请求
        response.setHeader("Access-Control-Max-Age", "3600");
        //允许的头信息
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization");

        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(req, res);
        }
    }
}

网上大多也是这样配置的,之后想想会不会是前端的问题。

打开浏览器,F12 进行调试,看了下请求格式,发现请求格式出现问题,前端请求令牌时,是携带授权码,以表单方式 + Authorization 请求头字段进行请求,

正确前端代码如下:

// 客户端id和密钥,以冒号连接,并base64编码
const x = window.btoa('curl_client'+':'+'123');
const dd = {
                    "grant_type": "authorization_code",
                    "redirect_uri": "http://localhost:8001",
                    "code": code  // 授权码
                };
                // 拿令牌
                axios({
                    method: 'post',
                    url: "http://localhost:8002/oauth/token",
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                        'Authorization': "Basic "+ x
                    },
                    data: Qs.stringify(dd)    // 注意引入 qs.js
                }).then(res => {
                    console.log("返回的数据:" + res.data);
                    /*{
                        "access_token": "09f402dd-2f52-4fd6-89a0-8233b2870768",
                        "token_type": "bearer",
                        "expires_in": 3426,
                        "scope": "read"
                    }*/
                    // 拿到访问令牌
                    const accessToken = res.data.access_token;
                    console.log("访问令牌:"+accessToken)
                    setCookie("accessToken",accessToken);
                    window.location.href = "http://localhost:8001/ok"
                })

项目完整代码: https://github.com/hcy1-88/auth-two.git
包括了从客户端登录,选择第三方登录,获取 资源服务器 资源的完整流程,并选择 数据库方式 存储令牌和客户端信息,而不是内存方式。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐