时间:2021-05-20
本文导航
SpringBoot解决跨域问题的两种方案:
1、通过给方法或者类加注解的形式,@CrossOrigin。
2、继承接口,重写addCorsMappings方法。
第一种方式:
@RestController@CrossOrigin("http://localhost:8081")public class BaseController { @GetMapping("/hello") public String testGet(){ return "get"; } @PutMapping("/doPut") public String testPut(){ return "put"; }}指定请求来源,可以写成“*”,表示接收所有来源的请求。
第二种方式:
@Configurationpublic class WebMvcConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**").allowedOrigins("http://localhost:8081") .allowedHeaders("*") .allowedMethods("*") .maxAge(30*1000); }}allowOrigins也可以写成allowedOrigins(" * "),表示接收所有来源的请求。
注意点:
1、路径来源的写法问题
如果后台指定路径来源为:http://localhost:8081
那么在浏览器里访问前端页面的时候,必须用 http://localhost:8081,不可以写成127.0.0.1或者本机ip地址。否则还是会报跨域错误。测试如下
后台设置:
@Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**").allowedOrigins("http://localhost:8081") .allowedHeaders("*") .allowedMethods("*") .maxAge(30*1000); }前端请求:
<script>doGet = function () {$.get('http://localhost:8080/hello', function (msg) {$("#app").html(msg);});}doPut = function () {$.ajax({type:'put',url:'http://localhost:8080/doPut',success:function (msg) {$("#app").html(msg);}})}</script>启动服务,浏览器里访问:
http://localhost:8081/index.html正常返回结果
浏览器里访问:
http://127.0.0.1:8081/index.html报跨域错误如下:
所以说,浏览器访问路径需要与后台allowOrigin里设置的参数一致。
那如果代码里的访问路径可以不一样吗,比如:
doGet = function () { $.get('http://127.0.0.1:8080/hello', function (msg) { //本机ip地址 $("#app").html(msg); }); } doPut = function () { $.ajax({ type:'put', url:'http://192.168.1.26:8080/doPut', success:function (msg) { $("#app").html(msg); } }) }经过测试,是可以的,只要浏览器里访问页面的路径写法与后台保持一致就可以了。
2、携带Cookie
有时候,前端调用后端接口的时候,必须要携带cookie(比如后端用session认证),这个时候,就不能简单的使用allowOrigins("*")了,必须要指定具体的ip地址,否则也会报错。
以上就是SpringBoot服务器端解决跨域问题的详细内容,更多关于SpringBoot 解决跨域的资料请关注其它相关文章!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
1.json与jsonp的引入在ajax中JSON用来解决数据交换问题,而JSONP来实现跨域。备注:跨域也可以通过服务器端代理来解决;理解:JSON是一种数据
什么是AJAX的跨域请求出于安全的考虑,如果你要从。整个解决方案大概如下图所示:第二个解决方案就是在服务器端通过WebClient(或者其他)的类来请求跨域的内
前后端分离,使用nginx解决跨域问题前端:vue.js+nodejs+webpack后台:SpringBoot反向代理服务器:nginx思想:将前端代码打包,
原来由于浏览器的安全限制,网络连接的跨域访问时不被允许的。我们不能在浏览器端直接使用AJAX来跨域访问资源,但是在服务器端是没有这种跨域安全限制的。所以,我们只
一、一些概念①传统Ajax:交互的数据格式——自定义字符串或XML描述; 跨域——通过服务器端代理解决。②如今最优方案:使用JSON格式来传输数据,使用J