13518219792
有一次我的项目中采用了前后端分离的模式，引起了跨域问题，本文将介绍我所采用的跨域解决方法。
10年积累的做网站、网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先建设网站后付款的网站建设流程，更有宁河免费网站建设让你可以放心的选择与我们合作。
首先要了解产生跨域的本质，也就是同源策略的限制，源是指域名、端口号、协议，有一者不相同将被浏览器拒绝接受响应信息，（请求可以发送出去，但是浏览器不接受响应）。
解决方法：
1. jsonp
jsonp的原理的 src="" 属性不受同源策略的限制，动态创建一个callback回调函数，服务器调用回调函数把数据放进去，具体的细节打算以后做一个专门讲解。
这里给一个模版:
$.ajax({
type: "get", //jsonp只能使用get
async: false,
url: ""
dataType: "jsonp",
jsonp: "callback",
jsonpCallback:"message", //注意这里给回调函数起的名字
success: function(json){
}
})
如果这里你的回调函数起名为message，那么你在后端返回json的时候，也要注意在最外面包一层message{}。
这里jsonp的确定也可以明显的看出，只支持get请求，原因就是因为通过src=“”发送请求，所以可以知道是url传参。
那么jsonp的好处是什么呢，兼容性，几乎所有浏览器都支持（包括一些版本比较老的），不需要XMLHttpRequest或ActiveX的支持。
2. cors
又称跨域访问，浏览器将cors请求分为简单请求和非简单请求，因为本文主要讲解具体的方法，所以关于细节部分有兴趣可以去看其他博客或者我以后再做一篇具体的讲解（和jsonp一起）。在springboot中，官方已经提供了支持。直接贴代码：
方式一：全局定义
@Configuration
public class CorsConfig implements WebMvcConfigurer {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
List list = new ArrayList<>();
list.add("*");
corsConfiguration.setAllowedOrigins(list);
/*
// 请求常用的三种配置，*代表允许所有，当时你也可以自定义属性
（比如header只能带什么，只能是post方式等等）
*/
corsConfiguration.addAllowedOrigin("*"); //支持的源
corsConfiguration.addAllowedHeader("*"); //header限制
corsConfiguration.addAllowedMethod("*"); //支持方法
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source
= new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig());
return new CorsFilter(source);
}
}
方式二：局部定义
@CrossOrigin(origins = "*",allowCredentials="true",allowedHeaders = "",methods = {})
直接在需要跨域的方法上添加注解，不过我没试过，有兴趣或者有这种方式需求的朋友可以尝试一下。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
