oauth2.0,使用 axios 请求令牌时,出现跨域问题的解决办法
oauth2.0 使用 axios请求令牌时的跨域问题
·
出现跨域问题,一开始以为是后端的问题,但后端确实配置了跨域:
@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
,
包括了从客户端登录,选择第三方登录,获取 资源服务器 资源的完整流程,并选择 数据库方式 存储令牌和客户端信息,而不是内存方式。
更多推荐
已为社区贡献4条内容
所有评论(0)