先贴出使用jsonp形式完成跨域请求的办法
ps:服务器端不需要设置任何跨域配置
但ajax请求需要注意其属性dataType和jsonp,其中jsonp的值callback可以自定义,服务器端返回时需要与自定义的相同
$('#jsonpBtn').click(function(){
var obj = {};
obj.name='test';
obj.price = '100';
$.ajax({
url : 'http://127.0.0.1:8081/firstDemo/jsonp',
type : 'POST',
dataType : 'jsonp',
jsonp : 'callback',
data : {
'info' : JSON.stringify(obj)
},
success : function(data){
console.log('in success');
console.log(data);
},error : function(data){
console.log('in error');
}
});
});
callback参数可以通过方法参数获取,也可以使用request获取,返回数据时注意拼接的形式 --> callback(返回的数据)
@RequestMapping("/jsonp")
public String jsonp(String callback, HttpServletRequest request) {
logger.info(callback);
logger.info(request.getParameter("callback"));
logger.info(request.getParameter("info"));
Item item = new Item();
item.setName("测试产品11");
item.setPic("abc11");
item.setPrice(100);
return callback+"("+ JSONObject.toJSONString(item) +")";
};
SpringBoot可以配置跨域请求,配置完成后,正常发送ajax请求就可以了,需要注意ajax的返回值类型,如果服务器返回非json格式的字符串(例:success, ok, y 这种形式的字符串),那么需要设置为text,否则不会进success回调,而是进入error回调,如果是json格式的字符串,则设置为json即可
@Configuration
public class GlobalConfiguration implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedHeaders("*").allowedOrigins("*").allowedMethods("*");
}
}
addMapping允许的请求路径,设置为 /** 表示所有路径都允许被跨域请求,allowedHeaders允许的请求头,allowedOrigins允许的域名,allowedMethods允许的方法
$('#btn').click(function () {
$.ajax({
url: 'http://127.0.0.1:8081/firstDemo/index',
type: 'POST',
dataType: 'json',
success: function (data) {
console.log('in');
console.log(data);
}, error: function (data) {
alert('error');
console.log(data);
}
})
});
@RequestMapping("/index")
public String index() {
Item item = new Item();
item.setName("测试产品11");
item.setPic("abc11");
item.setPrice(100);
return JSONObject.toJSONString(item);
}
网友评论