转发自:https://blog.csdn.net/b376924098/article/details/79709075
一、第一种方式 cors
实现了WebMvcConfigurer的类中重写
@Override
public void addCorsMappings(CorsRegistry registry) {
//设置允许跨域的路径
registry.addMapping("/**")
//设置允许跨域请求的域名
.allowedOrigins("*")
//是否允许证书 不再默认开启
.allowCredentials(true)
//设置允许的方法
.allowedMethods("*")
//跨域允许时间
.maxAge(3600);
}
可能会遇到跨域乱码问题,这里我提供两种网上的常用方式
1、@RequestMapping(name = "/test" ,produces="text/plain;charset=UTF-8")
2、实现configureMessageConverters方法(同上)
@Bean
public HttpMessageConverter<String> httpMessageConverter(){
HttpMessageConverter httpMessageConverter=new StringHttpMessageConverter(Charset.forName("UTF-8"));
return httpMessageConverter;
}
@Override
public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
converters.add(httpMessageConverter());
}
第二种方式:jsonp(仅支持get请求,如果RequestMapping没有加,method = RequestMethod.POST的话,ajax使用post也能访问)
//jsonp 处理函数(可有可无)
function crossback(data){
console.log("进入回调函数!!!!"+data.name)
}
//ajax请求方式
$("#cross").click(function(){
$.ajax({
type:"get",
//data:{"ipAddress":"192.168.0.109"},
dataType:"jsonp",
jsonp:"callback",//默认写法
jsonpCallback:"crossback",//前台是什么后台就是什么作为前缀,如果上面写了对应函数就会先执行对应函数 在执行success函数
contentType:"application/json",
url:"http://localhost:8010/test",
async:true,
timeout:3000,
success:function(data){
console.log(data.name);
}
});
});
服务端代码
@RequestMapping(name = "/test")
//,produces="text/plain;charset=UTF-8"
@ResponseBody
public String test(String ipAddress) {
System.out.println("进入跨域测试方法:访问IP地址: "+ipAddress);
//这里的crossback对应的是前端的jsonpCallback的值
//({"+"\"name\":"+"\"测试跨域\""+"})"这一段是json格式的值,我是自己拼接的,大家可以使用工具,注意前面一定要加前缀
return "crossback({"+"\"name\":"+"\"测试跨域\""+"})";
}
效果图(jsonp)
三、nginx跨域,这个东西只是说一下,作者也没有去试过,自己可以百度一下,在项目不在自己服务器上的情况下可以使用此方法完成跨域,具体操作自行百度!
jsonp:服务器需要返回固定的拼接js,只能get方式使用,不支持post,优点就是对浏览器兼容性比较好
cors:这个的不需要改变前端代码就可以实现跨域,而jsonp需要前后端修改代码,缺点:不支持ie10以下的浏览器,支持所有http请求
nginx:当资源不处于自己的服务器上才能使用,因为前面两种方式都需要修改服务端的代码,他人项目中的代码我们是无法修改的此时就可以选择nginx进行跨域操作