方法一: 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() + ");";
}