ajax请求携带自定义请求头header(跨域和同域)案例实战教程

目录

• 1. ajax跨域请求（无cookie、无header）案例（java）
• 2. ajax跨域请求获取和创建cookie案例（java）
• 3. ajax跨域请求，携带请求头header案例（java）
• 3. jsonp实现跨域读写cookie案例（java）
• 亲测小结论：

/**
     * 
        * @Title: getAjaxCross
        * @Description: TODO(ajax请求，跨域)
        * @param request
        * @param response
     */
    @RequestMapping(value ="/getAjaxCross",method= {RequestMethod.GET})
    public void getAjaxCross(HttpServletRequest request, HttpServletResponse response){
        try {
            response.setCharacterEncoding("UTF-8");
            //设置允许多个域名允许跨域集合
            String[] allowDomains = {"http://czt.casicloud.com", "http://czt.ming.com"};
            Set allowOrigins = new HashSet(Arrays.asList(allowDomains));
            String origin = request.getHeader("Origin");
            if(allowOrigins.contains(origin)){
                //设置允许跨域的配置:Access-Control-Allow-Origin： 响应头指定了该响应的资源是否被允许与给定的origin共享
                response.setHeader("Access-Control-Allow-Origin", origin);
            }
            //数据
            Map<String, Object> resultMap = new HashMap<String, Object>();
            resultMap.put("message", "ajax请求，跨域成功");
            String result = JsonUtils.objectToJson(resultMap);
            response.getWriter().write(result);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

//4.ajax跨域
         function getCookieAjaxCross() {
             $.ajax({
                 type:"get", 
                 url:"http://czt.ming.com/xxx/xxx/xxx/getAjaxCross",
                 async:true,
                 data:{},
                 dataType: 'json',
                 success: function(data) {
                     console.log(data);
                 }
             });
         }
         getCookieAjaxCross();

/**
     * 
        * @Title: getCookieAjax
        * @Description: TODO(ajax请求，跨域传递cookie)
        * @param request
        * @param response
     */
    @RequestMapping(value ="/getCookieAjax",method= {RequestMethod.GET})
    public void getCookieAjax(HttpServletRequest request, HttpServletResponse response){
        try {
            response.setCharacterEncoding("UTF-8");
            response.setHeader("Access-Control-Allow-Credentials", "true");
            //设置允许多个域名允许跨域集合
            String[] allowDomains = {"http://czt.casicloud.com", "http://czt.ming.com"};
            Set allowOrigins = new HashSet(Arrays.asList(allowDomains));
            String origin = request.getHeader("Origin");
            if(allowOrigins.contains(origin)){
                //设置允许跨域的配置:Access-Control-Allow-Origin： 响应头指定了该响应的资源是否被允许与给定的origin共享
                response.setHeader("Access-Control-Allow-Origin", origin);
            }
            //获取cookie
            Cookie[] cookies = request.getCookies();
            //设置cookie
            Cookie cookie = new Cookie("access_token_ajax", UUID.randomUUID().toString());
            cookie.setPath("/");
            response.addCookie(cookie);
            //数据
            Map<String, Object> resultMap = new HashMap<String, Object>();
            resultMap.put("cookies", cookies);
            resultMap.put("message", "ajax请求，跨域传递cookie成功");
            String result = JsonUtils.objectToJson(resultMap);
            response.getWriter().write(result);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

//4.ajax跨域携带cookie和自定义请求头header
         function getCookieAjaxCross() {
             $.ajax({
                 type:"get", 
                 url:"http://czt.ming.com/industry/api/publishForeign/getCookieAjax",
                 async:true,
                 data:{},
                 dataType: 'json',
                 xhrFields: {
                     withCredentials: true // 发送Ajax时，Request header中会带上 Cookie 信息。
                 },
                 crossDomain: true, // 发送Ajax时，Request header 中会包含跨域的额外信息，但不会含cookie（作用不明，不会影响请求头的携带）
                 success: function(data) {
                     console.log(data);
                 }
             });
         }
         getCookieAjaxCross();

import java.io.IOException;
import java.util.Arrays;
import java.util.HashSet;
import java.util.Set;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 * 
    * @ClassName: CorsFilter
    * @Description: TODO(跨域请求过滤器)
    * @author clm
    * @date 2019年10月25日
    *
 */
public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
            throws IOException, ServletException {
        /*
         * 跨域请求头服务端配置：
         * 1.Access-Control-Allow-Origin：设置允许跨域的配置， 响应头指定了该响应的资源是否被允许与给定的origin共享
         * 2.Access-Control-Allow-Credentials：响应头表示是否可以将对请求的响应暴露给页面（cookie）。返回true则可以，其他值均不可以。
         * 3.Access-Control-Allow-Headers:用于预检请求中，列出了将会在正式请求的 Access-Control-Request-Headers 字段中出现的首部信息。（自定义请求头）
         * 4.Access-Control-Allow-Methods：在对 预检请求的应答中明确了客户端所要访问的资源允许使用的方法或方法列表。
         */
        HttpServletRequest httpRequest = (HttpServletRequest) servletRequest;
        HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
        //设置允许多个域名允许跨域集合
        String[] allowDomains = {"http://czt.casicloud.com", "http://czt.ming.com"};
        Set<String> allowOrigins = new HashSet<String>(Arrays.asList(allowDomains));
        String origin = httpRequest.getHeader("Origin");
        if(allowOrigins.contains(origin)){
            //设置允许跨域的配置:Access-Control-Allow-Origin： 响应头指定了该响应的资源是否被允许与给定的origin共享
            httpResponse.setHeader("Access-Control-Allow-Origin", origin);
        }
        httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
        httpResponse.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept, access-token");
        httpResponse.setHeader("Access-Control-Allow-Methods", "GET, PUT, DELETE, POST, OPTIONS");
        if (httpRequest.getMethod().equalsIgnoreCase("OPTIONS")) {
            httpResponse.setStatus(202);
            httpResponse.getWriter().close();
            return;
        }
        filterChain.doFilter(servletRequest, servletResponse);
    }
    @Override
    public void destroy() {
    }
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
}
web.xml中配置过滤器：
    <filter>
        <filter-name>CorsFilter</filter-name>
        <filter-class>xxx.xxx.xxx.xx.xxx.CorsFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>CorsFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

/**
     * 
        * @Title: getPersonHeader
        * @Description: TODO(跨域获取请求头)
        * @param request
        * @param response
     */
    @RequestMapping(value ="/getPersonHeader",method=RequestMethod.GET)
    public void getPersonHeader(HttpServletRequest request, HttpServletResponse response){
        try {
            response.setCharacterEncoding("UTF-8");
            String personHeader = request.getHeader("Access-Token");
            System.err.println("获取自定义请求头（Access-Token）：" + personHeader);
            //数据
            Map<String, Object> resultMap = new HashMap<String, Object>();
            resultMap.put("message", "跨域获取请求头成功");
            resultMap.put("personHeader", personHeader);
            String result = JsonUtils.objectToJson(resultMap);
            response.getWriter().write(result);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

//同域前端设置自定义请求头，后端获取自定义请求头
         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();

/**
     * 
        * @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("/");
            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();
        }
    }

        //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();