//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();
(3)测试ajax跨域请求获取和建设cookie:
通过会见页面,js触发ajax跨域请求,前端和靠山假如不凭据代码中设置相应参数会报各类跨域错误;
3. ajax跨域请求,携带请求头header案例(java)
(1)启动一个java web项目,设置两个域名(host),czt.ming.com、czt.casicloud.com;
(2)ajax跨域携带请求头会发送两次请求,一次预查抄请求(options),预查抄请求通过之后才会举办真正的请求,所以java靠山需要设置相应的跨域过滤器,如下:
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>
(3)java靠山Controller代码:
/** * * @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(); } }
(4)前端页面代码如下:
留意:crossDomain(浸染不明)