记录一下自己解决ajax跨域无法正常显示的两种解决方案。
后端解决方法(配置filter)
我用的是SpringBoot,使用下面配置即可。
package com.example.config;
import org.springframework.stereotype.Component;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@Component
// urlPatterns 后面的参数表示请求的url,filterName首字母最好小写
@WebFilter(urlPatterns = {"/*"}, filterName = "corsFilter")
public class CORSFilter implements Filter {
@Override
public void init(FilterConfig filterConfig){
}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) servletRequest;
HttpServletResponse response = (HttpServletResponse) servletResponse;
response.addHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
response.addHeader("Access-Control-Allow-Methods", "*");
response.addHeader("Access-Control-Allow-Headers", "Content-Type");
//TODO 开启 cookie跨域
response.setHeader("Access-Control-Allow-Credentials", "true");
//TODO 有效期30分钟
response.addHeader("Access-Control-Max-Age", "1800");
//response.addHeader("Access-Control-Expose-Headers", "token");
//response.setHeader("token", "111111111111111");
filterChain.doFilter(request, response);
}
@Override
public void destroy() {
}
}
前端修改ajax请求
修改datatype="jsonp";
$.ajax({
async:false,
url:"http://localhost:8080/sanji/proname",
data:{id:pcode},
type:"GET",
dataType:"jsonp",
jsonp:'callback',
jsonpCallback:"successCallback",
success:function(result)
{
console.log('success2');
var str = "<option value = '001'>001</option>";
for(var i=0;i<result.length;i++)
{
str = str+"<option value = '"+result[i]+"'>"+result[i]+"</option>";
}
$("#sheng").html(str);
},
error: function(result) {
console.log("获取省份失败");
var str = "<option value = '001'>001</option>";
console.log(result);
for(var i=0;i<result.length;i++)
{
console.log(result.length);
str = str+"<option value = '"+result[i]+"'>"+result[i]+"</option>";
}
$("#sheng").html(str);
}
});
// 后端修改返回String,在前面添加successCallback("+ 返回的数据 +")
Gson gson = new Gson();
String json = gson.toJson(provinceNameList);
return "successCallback(" + json + ")";
以上就能解决ajax跨域,请求成功但是不会成功显示的问题。