ajax传输json数据请求方式为options(带预检的跨域请求)
报错信息
前台代码
function tt(){
var json = {
companyName: "9",
abbrStoreName: "09",
primaryBusiness: "09",
productor: "0",
bossName: "9",
mobil: "09",
address: "9",
companyLOGO: "/Estore/attrLogoImage/2019040810055411093015941610.png",
licenceImage: "/Estore/attrLicenceImage/2019040810055610316083881959.png"
}
$.ajax({
type: 'POST',
url: 'http://192.168.1.11:8096/EStore-app-boss/app/store/addAttrSeller',
data: JSON.stringify(json),
async : false,
dataType : 'json',
contentType : 'application/json',
success: function (data )
{
alert("111");
},
error:function (XMLHttpResponse, textStatus, errorThrown) {
alert("请求失败!");
}
});
}
后台代码
@RequestMapping(value = "/addAttrPictures")
@ResponseBody
public Object addAttrPictures(HttpServletRequest request, @RequestParam(value="uploadType")String uploadType) throws Exception{
String imagePath = null;
if("attrLogoImage".equals(uploadType)){
imagePath = UploadConstant.RESOURCES_URL + UploadConstant.ATTR_LOGO_IMAGE;
}else{
imagePath = UploadConstant.RESOURCES_URL + UploadConstant.ATTR_Licence_IMAGE;
}
List<String> result = FileOperateUtils.upload(request,imagePath);
Map<String, Object> map = new HashMap<String,Object>();
//文件名
String fileName="";
if (result != null) {
fileName = result.get(0);
//图片路径
imagePath=imagePath.substring(imagePath.indexOf("/",3))+fileName;
map.put("imagePath", imagePath);
}
return JSON.toJSONString(map);
}
解决方法:
1.跨域过滤器
package com.app.controller;
import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
*
* @author wwhhf
* @since 2016年5月30日
* @comment 跨域过滤器
*/
public class CrossOriginFilter implements Filter {
private FilterConfig config = null;
@Override
public void init(FilterConfig config) throws ServletException {
this.config = config;
}
@Override
public void destroy() {
this.config = null;
}
/**
*
* @author wwhhf
* @since 2016/5/30
* @comment 跨域的设置
*/
@Override
public void doFilter(ServletRequest request, ServletResponse response,
FilterChain chain) throws IOException, ServletException {
HttpServletResponse httpResponse = (HttpServletResponse) response;
// 表明它允许"http://xxx"发起跨域请求
httpResponse.setHeader("Access-Control-Allow-Origin",
config.getInitParameter("AccessControlAllowOrigin"));
// 表明在xxx秒内,不需要再发送预检验请求,可以缓存该结果
httpResponse.setHeader("Access-Control-Allow-Methods",
config.getInitParameter("AccessControlAllowMethods"));
// 表明它允许xxx的外域请求
httpResponse.setHeader("Access-Control-Max-Age",
config.getInitParameter("AccessControlMaxAge"));
// 表明它允许跨域请求包含xxx头
httpResponse.setHeader("Access-Control-Allow-Headers",
config.getInitParameter("AccessControlAllowHeaders"));
chain.doFilter(request, response);
}
}
2.web.xml配置过滤器
<filter>
<filter-name>CrossOrigin</filter-name>
<filter-class>com.app.controller.CrossOriginFilter</filter-class>
<init-param>
<param-name>AccessControlAllowOrigin</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>AccessControlAllowMethods</param-name>
<param-value>POST, GET, DELETE, OPTIONS,PUT</param-value>
</init-param>
<init-param>
<param-name>AccessControlMaxAge</param-name>
<param-value>3628800</param-value>
</init-param>
<init-param>
<param-name>AccessControlAllowHeaders</param-name>
<param-value>x-requested-with</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CrossOrigin</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
3.前端自定义了contentType : ‘application/json’(Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain),则发送这个请求前会发送一个预请求,因此需要在AccessControlAllowHeaders的param-value中加入Content-Type这一项,排除对contentType的拦截
<init-param>
<param-name>AccessControlAllowHeaders</param-name>
<param-value>x-requested-with,Content-Type</param-value>
</init-param>