http接口跨域解决方法

方法一: JQuery+jsnop 跨域的例子

使用原因：JavaScript是一种在Web开发中经常使用的前端动态脚本技术。
在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，
即JavaScript只能访问与包含它的文档在同一域下的内容。  

方法一实现步骤:

1.ajax请求代码 必须是get方式

get方式

//使用jsonp 跨域访问   
    $.ajax({  
         type: "get",  
   
        url: "http://localhost:9090/example?callback=?",   
        beforeSend: function(XMLHttpRequest){  
            //ShowLoading();  
        },  
        data: {'name':'测试'}, //请求数据 
        dataType : "jsonp",  
   
        jsonp: 'callback',  // //传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback)

        jsonpCallback:"callback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名


        //成功获取跨域服务器上的json数据后,会动态执行这个callback函数
        success: function(json){  
             console.log(json);
        },  
        complete: function(XMLHttpRequest, textStatus){  
            //HideLoading();  
        },  
        error: function(){  
            //请求出错处理  
        }  
        });    

2.服务器端 业务处理，把处理结果写到输出流里 注意输出流中json串的写法

//服务器端接到回调函数名字输出回调函数，客户端根据回调函数进行解析取得函数中json对象      
    response.setContentType("text/html; charset=utf-8");      
    String callback=request.getParameter("callback");      
    PrintWriter writer = response.getWriter();      
    writer .print(callback+"([ { name:\"跨域访问成功！\"},{ name:\"跨域访问失败！\"}])"); 

3.

JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都 可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

缺点：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

方法二：服务端（接口端处理方式）调用接口端可以不做处理

方法二实现步骤：

1.1、方式一。。。项目中添加一个下面的过滤器（1.1或者1.2 选择其中一个即可）

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 *
 *  跨域过滤器
 * @author sapphire
 * @version
 * @since 2016年12月19日
 */
@Component
public class CorsFilter implements Filter {

    final static org.slf4j.Logger logger = org.slf4j.LoggerFactory.getLogger(CorsFilter.class);

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "GET");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        chain.doFilter(req, res);
    }
    public void init(FilterConfig filterConfig) {}
    public void destroy() {}
} 

1.2、方式二。。。。项目中添加

/**
 * @author T-MacFBMa
 * @version V1.0.0
 * @Description Define collapse domain request access  定义垮域请求访问头
 * @date 2017/5/8
 */
@Configuration
public class CorsHeader {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("*")
                        .allowCredentials(true)
                        .allowedMethods("PUT", "DELETE", "POST", "GET")
//                        .allowedHeaders("header1", "header2", "header3")
//                        .exposedHeaders("header1", "header2")
                        .allowCredentials(false).maxAge(3600);
            }
        };
    }
}

1.3、方式三  ：    添加注解

@CrossOrigin()

2.ajax 调用方式

$.ajax({
	cache: true,
	type: type,
	url:url,
	data:params,
	async: false,
	error: function(request) {
		console.log(request);
		layer.msg('接口错误', {
		icon: 6,
		shift: 6,    // 出现的动画效果
		time: 1500 //2秒关闭（如果不配置，默认是3秒）
	}, function(){
				//do something
	});

	},
	success: function(json) {

	func(json);
	}
});

综合两种方式的调用：灵活调用接口

@RequestMapping(value = "getSignature", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
public String getSignature(String path, String callback) {
    return Objects.isNull(callback) ? ja1.toString() : callback + "(" + ja1.toString() + ");";

}

更多解决方式，期待各位提供建议。