前后端分离--跨域解决方案.docxVIP

前后端分离跨域问题的几种解决方案

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

出于浏览器的同源策略限制。

同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

二、什么是跨域?

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

两个相同的源之间浏览器默认其是可以相互访问资源和操作DOM的。

两个不同的源之间若想要相互访问资源或者操作DOM，那么会有一套基础的安全策略的制约。

解决方案

1.前台服务端解决方案（略）

2、后台服务端解决方案

方法一：@CrossOrigin

复制/**

注意：

1、springMVC的版本要在4.2或以上版本才支持@CrossOrigin

2、非@CrossOrigin没有解决跨域请求问题，而是不正确的请求导致无法得到预期的响应，导致浏览器端提示跨域问题。

3、在Controller注解上方添加@CrossOrigin注解后，仍然出现跨域问题，

解决方案之一就是：在@RequestMapping注解中没有指定Get、Post方式，具体指定后，问题解决。

其中@CrossOrigin中的2个参数：

origins：允许可访问的域列表

maxAge：准备响应前的缓存持续的最大时间（以秒为单位）。

可以配置在Controller上也可以配置在方法上

*/@CrossOrigin

@RestController

publicclassperson{

@RequestMapping(method=RequestMethod.GET)

publicStringadd(){

//若干代码

}

}

@RestController@RequestMapping(/account)

publicclassAccountController{

@CrossOrigin

@GetMapping(/{id})

publicAccountretrieve(@PathVariableLongid){

//...

}

}

方法二过滤器

publicclassCORSFilterimplementsFilter{

@Override

publicvoiddestroy(){

//TODOAuto-generatedmethodstub

}

@Override

publicvoiddoFilter(ServletRequestreq,ServletResponseres,

FilterChainchain)throwsIOException,ServletException{

HttpServletResponseresponse=(HttpServletResponse)res;

//表示所有的域都可以接受

response.setHeader(Access-Control-Allow-Origin,*);

//允许访问的方法

response.setHeader(Access-Control-Allow-Methods,POST,GET,PUT,OPTIONS,DELETE);

//请求得到结果的有效期

response.setHeader(Access-Control-Max-Age,3600);

response.setHeader(Access-Control-Allow-Headers,x-requested-with,Content-Type);

//:?该值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中，设置为true，即表示服务器明确许可

response.setHeader(Access-Control-Allow-Credentials,true);

chain.doFilter(req,res);