//同域前端设置自定义请求头，后端获取自定义请求头 function getPersonHeader() { $.ajax({ type:"get", url:"/xxx/xxx/xxx/getPersonHeader", async:true, //ajax配置请求头方式，第一种 headers: { "Access-Token":"Access-Token123456",//自定义请求头 "Content-Type":"application/json;charset=utf8" }, //ajax配置请求头方式，第二种 //beforeSend : function(request) { // request.setRequestHeader("Access-Token", "Access-Token123456"); // request.setRequestHeader("Content-Type", "application/json;charset=utf8"); //} data:{}, success: function(data) { console.log(data); } }); } getPersonHeader(); //跨域前端设置自定义请求头，后端获取自定义请求头 function getPersonHeaderCross() { $.ajax({ type:"get", url:"http://czt.ming.com/xxx/xxx/xxx/getPersonHeader", async:true, headers: { "Access-Token":"Access-Token123456",//自定义请求头 "Content-Type":"application/json;charset=utf8" }, data:{}, crossDomain: true, // 发送Ajax时，Request header 中会包含跨域的额外信息，但不会含cookie（作用不明，不会影响请求头的携带） success: function(data) { console.log(data); } }); } getPersonHeaderCross();
（5）测试ajax跨域请求携带请求头header：
通过访问页面，js触发ajax跨域请求，前端和后台如果不按照代码中配置相应参数会报各种跨域错误；
3. jsonp实现跨域读写cookie案例（java）
（1）启动一个java web项目，配置两个域名（host）,czt.ming.com、czt.casicloud.com；
（2）java后台jsonp代码：
/** * * @Title: setCookie * @Description: TODO(jsonp跨域设置cookie) * @param request * @param response */ @RequestMapping(value ="/setCookie.jsonp",method=RequestMethod.GET) public void setCookie(HttpServletRequest request, HttpServletResponse response){ try { response.setCharacterEncoding("UTF-8"); //设置cookie Cookie cookie = new Cookie("access_token", UUID.randomUUID().toString()); cookie.setPath("https://www.jb51.net/"); response.addCookie(cookie); //数据 Map<String, Object> resultMap = new HashMap<String, Object>(); resultMap.put("cookie", cookie); resultMap.put("message", "跨域设置cookie成功"); String result = JsonUtils.objectToJson(resultMap); //前端传过来的回调函数名称 String callback = request.getParameter("callback"); //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了 result = callback + "(" + result + ")"; response.getWriter().write(result); } catch (Exception e) { e.printStackTrace(); } } /** * * @Title: getCookie * @Description: TODO(jsonp跨域获取cookie) * @param request * @param response */ @RequestMapping(value ="/getCookie.jsonp",method=RequestMethod.GET) public void getCookie(HttpServletRequest request, HttpServletResponse response){ try { response.setCharacterEncoding("UTF-8"); //获取cookie Cookie[] cookies = request.getCookies(); //数据 Map<String, Object> resultMap = new HashMap<String, Object>(); resultMap.put("cookies", cookies); resultMap.put("message", "跨域获取cookie成功"); String result = JsonUtils.objectToJson(resultMap); //前端传过来的回调函数名称 String callback = request.getParameter("callback"); //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了 result = callback + "(" + result + ")"; response.getWriter().write(result); } catch (Exception e) { e.printStackTrace(); } }
（3）前端代码：
//1.jsonp跨域设置cookie function setCookieCrossJsonp() { $.ajax({ type:"get", url:"http://czt.ming.com/industry/api/publishForeign/setCookie.jsonp", async:true, data:{}, dataType: "jsonp", //返回类型为jsonp，实现跨域 jsonp:"callback", //jsonp和jsonpCallBack相当于在url后添加一个参数：?callback=back jsonpCallback:"back", //设定回调函数的名字，传到后台，进行包装，不设定自动生成 success: function(data) { //成功执行处理，对应后台返回的back(data)方法 console.log(data); } }); } setCookieCrossJsonp(); //2.jsonp跨域获取cookie function getCookieCrossJsonp() { $.ajax({ type:"get", url:"http://czt.ming.com/industry/api/publishForeign/getCookie.jsonp", async:true, data:{}, dataType: "jsonp", //返回类型为jsonp，实现跨域 jsonp:"callback", //jsonp和jsonpCallBack相当于在url后添加一个参数：?callback=back jsonpCallback:"back1", //设定回调函数的名字，传到后台，进行包装，不设定自动生成 success: function(data) { //成功执行处理，对应后台返回的back(data)方法 console.log(data); } }); } getCookieCrossJsonp();
（4）测试jsonp跨域请求获取和创建cookie：
通过访问页面，js触发jsonp跨域请求、，能够正常跨域设置cookie和获取cookie；
以上这篇ajax请求添加自定义header参数代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: