oauth2.0,使用 axios 请求令牌时,出现跨域问题的解决办法

本文探讨了一次前端应用在尝试从后端获取资源时遇到的跨域问题,着重分析了后端配置的CORS策略与前端使用的基本认证请求头之间的冲突。通过实例和源码,揭示了问题所在并提供了正确的前端请求格式和配置建议。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

@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
包括了从客户端登录,选择第三方登录,获取 资源服务器 资源的完整流程,并选择 数据库方式 存储令牌和客户端信息,而不是内存方式。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值