跨域问题是由于浏览器的同源策略(Same-Origin Policy)引起的安全限制。当使用jQuery的Ajax请求从一个域名下的网页去访问另一个域名下的资源时,就会遇到跨域问题。
No 'Access-Control-Allow-Origin' header is present on the requested resource
// 使用Filter方式
@WebFilter("/*")
public class CorsFilter implements Filter {
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Content-Type, x-requested-with");
chain.doFilter(req, res);
}
// 其他方法省略...
}
// 或者在Spring Boot中使用注解
@CrossOrigin(origins = "*")
@RestController
public class MyController {
// 控制器方法
}
服务端:
@RequestMapping(value = "/api/data", method = RequestMethod.GET)
public void getData(@RequestParam("callback") String callback, HttpServletResponse response)
throws IOException {
String jsonData = "{\"name\":\"John\", \"age\":30}";
response.setContentType("application/javascript");
response.getWriter().write(callback + "(" + jsonData + ")");
}
客户端:
$.ajax({
url: 'http://otherdomain.com/api/data',
dataType: 'jsonp',
jsonp: 'callback',
success: function(data) {
console.log(data);
}
});
可以设置一个同域的代理接口,由代理服务器转发请求到目标服务。
$.ajax({
url: 'http://otherdomain.com/api',
type: 'GET', // 或 'POST'
crossDomain: true,
dataType: 'json',
success: function(response) {
console.log(response);
},
error: function(xhr, status, error) {
console.error(error);
}
});
Access-Control-Allow-Origin: *
,应该指定具体的域名xhrFields: { withCredentials: true }
Access-Control-Allow-Credentials: true