layui实现请求携带token，解决跨域问题 |
您所在的位置：网站首页 › layui文件上传配置 › layui实现请求携带token，解决跨域问题 |
layui实现请求携带token，解决跨域问题
|
layui实现请求携带token，解决跨域问题
Access to XMLHttpRequest at 'http://localhost:8001/admin/save' from origin 'http://127.0.0.1:8848' has been blocked by CORS policy: Request header field token is not allowed by Access-Control-Allow-Headers in preflight response. 23:28:32.890 jquery.js:4 POST http://localhost:8001/admin/save net::ERR_FAILED 一，layui请求(ajax)携带token使用localStorage保存登录成功时后端返回的token localStorage.token = data.token; console.log(data) $.ajax({ type:"post", url: requestUrl+"admin/login", dataType:"json", contentType:"application/json", data: JSON.stringify(data), success: function(data) { console.log(data) if(data.code == 200){ // 保存token localStorage.token = data.token; layer.msg(data.msg, function () { window.location = '../index.html'; }); }else if(data.code != 200){ layer.msg(data.msg); return false; } }, }); 二、请求时携带tokenheaders: { token : localStorage.token } var requestUrl = getUrl(); table.render({ elem: '#admin' ,height: 'full-50' ,url: requestUrl+'admin/page' ,toolbar: '#toolbarDemo' ,method:'post' ,contentType:"application/json" ,async: true ,headers: { token : localStorage.token } ,request: { pageName: 'pageNum' //页码的参数名称，默认：page ,limitName: 'pageSize', //每页数据量的参数名，默认：limit } ,defaultToolbar: ['filter', 'exports', 'print', { title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips' }], cols: [[ {field:'admId', width:100, title: 'ID', sort: true} ,{field:'admUser', width:100, title: '账号'} ,{field:'admPsw', width:100, title: '密码'} ,{field:'admName', width:100, title: '用户名'} ,{field:'admSex', width:100, title: '性别', align: "center"} ,{title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"} ]], limits: [5,10, 15, 20], limit: 10, page: true, skin: 'line' }); 跨域问题携带token后出现跨域 在拦截器中设置允许跨域，注意在Access-Control-Allow-Headers中加入token 如下图 /** * 拦截器，允许跨域 * @author zhang * @date 2018年10月10日,下午2:05:39 */ @Component public class CrosInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { response.setHeader("Access-Control-Allow-Origin", "*");// 允许指定域访问跨域资源 //是否允许cookie //response.setHeader("Access-Control-Allow-Credentials", "true"); // response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT"); response.setHeader("Access-Control-Max-Age", "18000");//Access-Control-Max-Age用来指定本次预检请求的有效期，单位为秒，，在此期间不用发出另一条预检请求。 response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization,Access-Token,token"); response.setHeader("Access-Control-Expose-Headers", "*");//响应客户端的头部 允许携带Token 等等 response.setContentType("application/json; charset=utf-8"); response.setCharacterEncoding("UTF-8"); String method= request.getMethod(); String token = request.getHeader("token"); System.out.println("token:"+token); if (method.equals("OPTIONS")){ System.out.println("跨了一下域。。。"); response.setStatus(200); return false; } System.out.println("没有跨域。。。"); return true; } } 最后设置拦截所有请求 @Configuration public class interceptorsConfig implements WebMvcConfigurer { @Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(new CrosInterceptor()) .addPathPatterns("/**");//拦截请求允许跨域 //以下我自己的JWT拦截，可以不看 registry.addInterceptor(new JWTInterceptor()) .excludePathPatterns("/admin/login") //放行登录请求 .excludePathPatterns("/admin/getImage") //放行登录请求 .addPathPatterns("/admin/*"); // 拦截除了"/user/**的所有请求路径 } }本人也是个小白，和大家分享一下自己的一些经验，对代码的理解可能不是很透彻，这也只是给同样是小白的大家提供一下使用方法的参考而已。欢迎大佬指点错误，描述不恰当之处敬请谅解 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |