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"
                })；