一、使用jsonp
前端ajax请求时,使用 jsonp 方式访问接口。原理为:浏览器允许有 src 属性的标签跨域请求,因此通过后台返回 script 文本包裹 json 数据的方式,实现跨域访问。
请求 Request Headers 和 Response Headers 示例:
服务端写法:
@RequestMapping(value = "/test", method = RequestMethod.GET)
@ResponseBody
public String test(@RequestParam("callback") String callback) {
ObjectMapper objectMapper = new ObjectMapper();
Map<String, Object> map = new HashMap<>();
map.put("msg", "23333");
try {
return callback + "(" + objectMapper.writeValueAsString(map) + ")";
} catch (IOException e) {
e.printStackTrace();
}
return "";
}
前端写法:
$.ajax({
url: 'test.do',
method: 'get',
dataType: 'jsonp',
jsonp: "callback",
jsonpCallback:"fToHandler",
success: function(data){},
error: function(data){}
});
function fToHandler(data) {
console.log("fToHandler");
console.log(data.msg);
}
输出为:
或者可以直接在 success函数下执行:
$.ajax({
url: 'test.do',
method: 'get',
dataType: 'jsonp',
jsonp: "callback",
jsonpCallback:"fToHandler",
success: function(data){
console.log("success");
console.log(data.msg);
},
error: function(data){}
});
输出为:
二、CORS
CORS(cross origin resource share)即跨域资源共享,该方式只需在服务器端设置返回 header
即可:
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Origin", "http://wenglm.cn");
三、服务端 nginx 配置 Access-Control-Allow-Origin 允许跨域访问
参看: 阿里云ECS跨域问题
四、使用nginx反向代理
跨域问题是由于浏览器的CORS(cross origin resource share)策略的存在,不允许跨域的请求。
使用 nginx 反向代理,则可解决不同源的问题:配置之后,访问的是 nginx 代理服务器,是同一域名,为同源;再通过 nginx 把接口前缀修改之后转发,返回获取的数据值。