2019JAVA中ajax不高亮_前后端分离的情况下，的ajax方法获取不到跨域的响应头？...

我的这个问题已经解决了。

在使用跨域的方式进行前后端的交互时，浏览器只会使用默认的header，如图所示：

因为，我们需要在服务端开放权限，允许客户端使用服务端自定义的header值，即使用该字段Access-Control-Expose-Headers控制权限，如代码所示：

/**

* 在业务处理器处理请求之前被调用 如果返回false

* 从当前的拦截器往回执行所有拦截器的afterCompletion(),

* 再退出拦截器链, 如果返回true 执行下一个拦截器,

* 直到所有的拦截器都执行完毕 再执行被拦截的Controller

* 然后进入拦截器链,

* 从最后一个拦截器往回执行所有的postHandle()

* 接着再从最后一个拦截器往回执行所有的afterCompletion()

*

* @param request

* @param response

*/

@Override

public boolean preHandle(HttpServletRequest request, HttpServletResponse response,

Object handler) throws Exception {

// 允许跨域

response.setHeader(HEADER_ACCESS_CONTROL_ALLOW_ORIGIN.key(), request.getHeader(HEADER_ACCESS_CONTROL_ALLOW_ORIGIN.value()));

response.setHeader(HEADER_ACCESS_CONTROL_ALLOW_METHODS.key(), HEADER_ACCESS_CONTROL_ALLOW_METHODS.value());

response.setHeader(HEADER_ACCESS_CONTROL_MAX_AGE.key(), HEADER_ACCESS_CONTROL_MAX_AGE.value());

response.setHeader(HEADER_ACCESS_CONTROL_ALLOW_HEADERS.key(), HEADER_ACCESS_CONTROL_ALLOW_HEADERS.value());

// 允许session

response.setHeader(HEADER_ACCESS_CONTROL_ALLOW_CREDENTIALS.key(), HEADER_ACCESS_CONTROL_ALLOW_CREDENTIALS.value());

// 允许客户端在header中使用哪些数值

response.setHeader(ACCESS_CONTROL_EXPOSE_HEADERS.key(), ACCESS_CONTROL_EXPOSE_HEADERS.value());

return true;

}

枚举类

public enum HeaderEnum {

// 解决跨域的问题

HEADER_ACCESS_CONTROL_ALLOW_ORIGIN("Access-Control-Allow-Origin", "Origin"),

HEADER_ACCESS_CONTROL_ALLOW_METHODS("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, OPTIONS, PATCH"),

HEADER_ACCESS_CONTROL_MAX_AGE("Access-Control-Max-Age", "3600"),

HEADER_ACCESS_CONTROL_ALLOW_HEADERS("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"),

// 解决session的问题

HEADER_ACCESS_CONTROL_ALLOW_CREDENTIALS("Access-Control-Allow-Credentials", "true"),

ACCESS_CONTROL_EXPOSE_HEADERS("Access-Control-Expose-Headers", "name,session,userId");

HeaderEnum(String key, String value) {

this.key = key;

this.value = value;

}

/**

* 响应key值

*/

private String key;

/**

* 响应value值

*/

private String value;

public String key() {

return key;

}

public String value() {

return value;

}

}

这样客户端通过xhr.getResponseHeaders(key)获取响应的key值

$.ajax({

'type': 'head',

'url': constant.server_path + "/index",

'success': function (data, status, xhr) {

var header = {

//登录用户名

"name": xhr.getResponseHeader('name'),

// 登录session

"session": xhr.getResponseHeader('session'),

// 用户编号

"userId": xhr.getResponseHeader('userId'),

};

console.log("name:" + header.name + "，session:" + header.session + "，userId:" + header.userId);

console.log(xhr.getAllResponseHeaders())

},

'error': function (data, status, xhr) {

}

})