场景: 需要知道当前登录用户是在那个地区
实现:利用jquery 跨域请求获取IP
var url = 'http://chaxun.1616.net/s.php?type=ip&output=json&callback=?';
$.getJSON(url, function(data) {
alert(data.Ip);
});
跨域原理:jQuery1.2后getJSON方法支持跨域读取json数据,原理是利用一个叫做jsonp的概念
JSONP的工作原理:
创建一个回调函数,动态创建Script标签,然后在远程服务上调用这个函数并且将JSON数据形式作为参数传递,完成回调。
将JSON数据填充进回调函数,进行相关的逻辑处理,或许这就是JSONP的JSON+Padding的含义。
注意:客户端传递的URL里要包含callback变量,以形如callback=?的形式结尾
引申:
"src"属性标签有跨域能力。
发现在Web页面上调用js文件时则不受是否跨域的影响(不仅如此,拥有"src"属性的标签都拥有跨域能力,比如<script>、<img>、<iframe>);
后端支持跨域:
为整个controller启用@CrossOrigin
@CrossOrigin(origins = "http://domain2.com", maxAge = 3600)
其中@CrossOrigin中的2个参数:
origins : 允许可访问的域列表 默认所有
maxAge:准备响应前的缓存持续的最大时间(以秒为单位)。
全局CORS配置
@Configuration
public class MyConfiguration {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**");
}
};
}
}
您可以轻松地更改任何属性,以及仅将此CORS配置应用到特定的路径模式:
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("http://domain2.com")
.allowedMethods("PUT", "DELETE")
.allowedHeaders("header1", "header2", "header3")
.exposedHeaders("header1", "header2")
.allowCredentials(false).maxAge(3600);
}
说明:
在Controller注解上方添加@CrossOrigin注解后,仍然出现跨域问题,解决方案之一就是:
在@RequestMapping注解中没有指定Get、Post方式,具体指定后,问题解决。