前端:jquery ajax 跨域請求問題解決彙總
一般情況下跨域分兩種請求方式:post、get;
1、post請求解決方式:
spring cloud 專案下:
後臺demo:
@CrossOrigin(allowCredentials = "true", allowedHeaders = "*", methods = {RequestMethod.GET, RequestMethod.POST, RequestMethod.DELETE, RequestMethod.OPTIONS, RequestMethod.HEAD, RequestMethod.PUT, RequestMethod.PATCH}, origins = "*")@RequestMapping(value = "/testPost", method = RequestMethod.POST) public int testPost(){ LogHelper logHelper = new LogHelper(); return SystemConstants.FW_SYS_SUCCESS; }
前端demo:
$.ajax({
url:"http://192.168.xx.xx:xx/testPost",
type:"POST",
contentType:"text/json; charset=UTF-8",
success:function(data){
},error:function(){
}
});
以上為spring cloud專案下解決跨域較為方便的一種。
2、servlet配置檔案方式,如下:
後臺demo:
@RequestMapping(value = "/testPost", method = RequestMethod.POST) public String testPost() { return "ok"; }
跨域攔截配置
<filter>
<filter-name>corsFilter</filter-name>
<filter-class>org.gateway.filter.CorsFilter</filter-class>
<init-param>
<param-name>allowOrigin</param-name>
<param-value>
http://192.168.100.67:8061,
http://cater.ypp2015.com,
</param-value>
</init-param>
<init-param>
<param-name>allowMethods</param-name>
<param-value>GET,POST,PUT,DELETE,OPTIONS</param-value>
</init-param>
<init-param>
<param-name>allowCredentials</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>allowHeaders</param-name>
<param-value>Origin,X-Requested-With,Content-Type,Accept</param-value>
</init-param>
</filter>
public class CorsFilter implements Filter {
private String allowOrigin;
private String allowMethods;
private String allowCredentials;
private String allowHeaders;
private String exposeHeaders;
@Override
public void init(FilterConfig filterConfig) throws ServletException {
allowOrigin = filterConfig.getInitParameter("allowOrigin");
allowMethods = filterConfig.getInitParameter("allowMethods");
allowCredentials = filterConfig.getInitParameter("allowCredentials");
allowHeaders = filterConfig.getInitParameter("allowHeaders");
exposeHeaders = filterConfig.getInitParameter("exposeHeaders");
}
@Override
public void doFilter(ServletRequest req, ServletResponse res,
FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) res;
if (StringUtils.isNotEmpty(allowOrigin)) {
List<String> allowOriginList = Arrays.asList(allowOrigin.split(","));
if (CollectionUtils.isNotEmpty(allowOriginList)) {
String currentOrigin = request.getHeader("Origin");
if (allowOriginList.contains(currentOrigin)) {
response.setHeader("Access-Control-Allow-Origin", currentOrigin);
}
}
}
if (StringUtils.isNotEmpty(allowMethods)) {
response.setHeader("Access-Control-Allow-Methods", allowMethods);
}
if (StringUtils.isNotEmpty(allowCredentials)) {
response.setHeader("Access-Control-Allow-Credentials", allowCredentials);
}
if (StringUtils.isNotEmpty(allowHeaders)) {
response.setHeader("Access-Control-Allow-Headers", allowHeaders);
}
if (StringUtils.isNotEmpty(exposeHeaders)) {
response.setHeader("Access-Control-Expose-Headers", exposeHeaders);
}
chain.doFilter(req, res);
}
@Override
public void destroy() {
}
3、get跨域
前端demo:
$.ajax({
url:"http://192.168.xx.xx:xx/testGet",
type:"get",
datatype:"jsonp",
jsonp:"callback",
jsonpCallback:"successCallback",
contentType:"text/json; charset=UTF-8",
success:function(data){
},error:function(){
}
});
後臺方式:servlet
後臺demo:
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/json;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
String name = request.getParameter("name");
String age = request.getParameter("age");
try {
String st = " 姓名:"+name+",age:"+age;
System.out.println("------------");
out.print("successCallback(" + st + ")");//尤其注意這裡返回的資料格式: {"name":" jone:18865920808,age:30"}
} catch (Exception e) {
e.printStackTrace();
} finally {
out.flush();
out.close();
}
}
這裡 在返回的時候會有:successCallback字首格式:successCallback(Jsonobject.tostring());
4、springcloud 處理get跨域:(前端程式碼和上面3一樣)
@CrossOrigin(allowCredentials = "true", allowedHeaders = "*",origins = "*",methods = {RequestMethod.GET})
@RequestMapping(value = "/testGet")
public String getCert() {
return "ok";
}
上述是個人在 jquery ajax跨域問題上遇到的一點小坎,最後通過整理得到了get、post的兩種處理方式,歡迎拋磚引玉;