jquery 跨域请求 获取客户端IP

 场景: 需要知道当前登录用户是在那个地区

实现:利用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方式，具体指定后，问题解决。

来源：oschina

链接：https://my.oschina.net/u/2361669/blog/737685