SpringBoot+Ajax跨域安全问题及解决方法

〇、遇到跨域安全问题

  在学习SpringBoot过程中,遇到了这样一个问题。当时用SpringBoot开发Rest服务接口,然后用Ajax请求获取数据,来实现前后端分离。但是在前端请求时,始终不能显示应该显示的数据。从浏览器的控制台报错来看(如下图),应该是遇到了跨域安全的问题。

一、为什么会出现跨域安全问题?

  要解决这个问题,首先得知道为什么会出现这个问题。通过了解,出现跨域安全问题的原因一般是以下三个问题:浏览器收到了正确的返回数据但是做出了限制、发出去的请求是XMLHttpRequest请求而不是JSON请求、前后端协议域名端口等不一样造成了跨域。

二、怎么去解决出现的跨域安全问题?

  根据上面的三个问题,去解决这次出现的跨域安全问题。

  1. 让浏览器不去做限制

  不同的浏览器应该有不同的设置参数的方法。例如谷歌浏览器就是disable-web-security。不过我们在应用中应该不会让我们的用户去改浏览器的参数,所以我没有采用这种方法。

  2. 让发出去的请求不是XMLHttpRequest请求

  在网上搜了一下,不少解决方法是把请求数据类型设为JSONP。但是存在一个问题就是如果用JSONP类型请求那么后台的服务接口也要做改动,因为用JSONP数据类型的请求虽然不是XHR但也不是JSON而是Script。而我想用的是JSON来实现前后端传输数据,而且JSONP对GET方式以外的请求不支持(我想用REST啊怎么可以木有POST\PUT\DELETE),所以我也没有采用这种方法。

  3. 解决前后端协议域名端口等不一样造成的跨域。

  解决跨域可以从客户端考虑,也可以从服务端考虑。从客户端考虑,可以用代理来将服务端的请求转换成与客户端相同的域的请求从而解决跨域问题;从服务端考虑,可以考虑在响应头里增加字段。因为服务端就是我用SpringBoot写的,而增加字段并不需要对每个接口进行改动,只要添加一个拦截器在所有的返回里添加返回头就可以了。当然,如果是调用别人家的接口,无法改动别人的服务端,那就只能考虑在客户端这边加代理了。

  根据控制台的错误信息,可以在服务端添加请求头Access-Control-Allow-Origin,来告诉浏览器服务端允许这个跨域。SpringBoot中我用的实现方式是增加一个Filter来拦截所有的请求在返回头里添加Access-Control-Allow-Origin和Access-Control-Allow-Method字段。事例代码如下(仅供参考):

 1 /*SpringBoot启动类*/
 2 package net.tsingmo.SpringBootDemo;
 3
 4 import org.springframework.boot.SpringApplication;
 5 import org.springframework.boot.autoconfigure.SpringBootApplication;
 6 import org.springframework.boot.web.servlet.FilterRegistrationBean;
 7 import org.springframework.context.annotation.Bean;
 8
 9 @SpringBootApplication
10 public class SpringBootDemoApplication {
11
12     public static void main(String[] args) {
13         SpringApplication.run(SpringBootDemoApplication.class, args);
14     }
15
16     @Bean
17     public FilterRegistrationBean filterRegistrationBean () {
18         FilterRegistrationBean filterRegistrationBean = new FilterRegistrationBean();
19         filterRegistrationBean.addUrlPatterns("/*");
20         filterRegistrationBean.setFilter(new ResponseHeaderFilter());
21         return filterRegistrationBean;
22     }
23 }
 1 /*ResponseHeaderFilter类*/
 2 package net.tsingmo.SpringBootDemo;
 3
 4 import javax.servlet.*;
 5 import javax.servlet.http.HttpServletResponse;
 6 import java.io.IOException;
 7
 8 public class ResponseHeaderFilter implements javax.servlet.Filter {
 9     @Override
10     public void init(FilterConfig filterConfig) throws ServletException {}
11
12     @Override
13     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
14         HttpServletResponse httpServletResponse = (HttpServletResponse) servletResponse;
15         httpServletResponse.addHeader("Access-Control-Allow-Origin", "*");
16         httpServletResponse.addHeader("Access-Control-Allow-Methods", "GET");
17         filterChain.doFilter(servletRequest, httpServletResponse);
18     }
19
20     @Override
21     public void destroy() {}
22 }

原文地址:https://www.cnblogs.com/Tsingmo/p/9130796.html

时间: 2024-08-10 19:18:16

SpringBoot+Ajax跨域安全问题及解决方法的相关文章

jquery ajax跨域的完美解决方法(jsonp方式)

ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquer

jQuery ajax跨域请求的解决方法

在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数据,事实上简单来说请求同一个域名下的url或者说用不带http的绝对路径和相对路径请求是没有任何问题的,如果请求外部资源,那么这就称为跨域请求. 由于安全性的问题,浏览器默认不支持跨域调用,晚上也有很多方法,各有优缺点,但是有一个比较好的解决方法这也是jQuery1.2之后官方推荐的,那就是在客户端

AJAX及其跨域的主要解决方法

AJAX = Asynchronous JavaScript andXML(异步的 JavaScript 和 XML).通过在后台与服务器进行少量数据交换,使网页实现异步更新.要明白异步交互可以通过同步和异步的对比很容易明白: 同步交互,就是最常见的click-refresh模式,点一个连接或提交一个表单,然后就必须重载整个页面 异步交互,javascript根据返回的数据,不刷新页面而改变当前页面的显示,例如:新浪微博,百度地图. Ajax的异步交互从XMLHttpRequest这个对象开始,

JQuery的Ajax跨域请求的解决方式

今天在项目中须要做远程数据载入并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuery对于Ajax的跨域请求有两类解决方式,只是都是仅仅支持get方式. 各自是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式. 什么是jsonp格式呢?API原文:假设获取的数据文件存放在远程server上(域名不同,也就是跨域获取数据).则须要使用jso

ajax本地跨域请求以及解决方法

什么是跨域? ??我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景.所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源,只要没有同时满足这三个条件的请求即为跨域请求,跨域请求控制台一般会出现类似错误: XMLHttpRequest cannot load http://xxxxx.php. No 'Access-Control-Allow-Origin' header is present on the requested reso

Nginx服务器中处理AJAX跨域请求的配置方法讲解

Nginx 实现AJAX跨域请求AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Control*指令.如下所示: ? 1 2 3 4 5 6 7 8 9 10 11 12 location /{ add_header 'Access-Control-Allow-Origin' 'http://other.subdomain.com'; add_header 'Access-Cont

解决ajax跨域问题的多种方法

//第一种方法使用jsonp的方式 <script type="text/javascript" src="http://www.youxiaju.com/js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ $.ajax( { type:'get', url : 'http://www.youxiaju.

AJAX 跨域请求的解决办法:使用 JSONP获取JSON数据

由于受到浏览器的限制,ajax不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办? 理解同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同.这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作.这个

前端复习-03-接上面ajax跨域问题的解决与探索

废话不多少 ..我估计一万个人都搞不清楚 什么是跨域 然后就被这堵墙无情的挡住了..我尝试了很多办法解决这个问题.后来再慕课网上的一个老师的ppt那里看到一张图 我觉得 能记住这张图的话 应该就算是深入浅出的了解了跨域了吧. 解决跨域这个遗留问题现在我所知道 常用的有三种方法这里 挨个复习和记录一下. 1.使用代理解决. 使用代理解决 其实很好理解.打个比方说,我要请求的json地址在我的阿里云上面,然后我现在在使用本地测试.去请求服务器上面的json数据,这不用看肯定就是跨域了.怎么办呢,如果