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

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

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

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

最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能

都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器

只是针对同源策略的一种实现。同源策略会阻止一个域的javascript

脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就

(port)。

二、什么是跨域?

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

url不同即为跨域。

当前页面url被请求页面url是否跨域原因

否同源(协议、域名、请口号相同)

http://www.testcomlhttp//www,testcom/indexhtml

跨域协议不同(http/https)

http://www.testsomlhttos//www.testcom/index.html

htto://www,testcom/htto://Nww,/跨域主域名不同(test/baidu)

跨域

http://Mww.testcom/htto://blog.testcoml子域名不同(www/blog)

跨域

http://www.testcom:8080/httg://wwww,testcom:7001/端口号不同(8080/7001)

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

的。

两个不同的源之间若想要相互访问资源或者操作DOM,那么会有

一套基础的安全策略的制约。

三、解决方案

1.前台服务端解决方案(略)

2、后台服务端解决方案

·方法一：@CrossOrigin

/**

注意：

致无法得到预期的响应，导致浏览器端提示跨域问题。

现跨域问题，

Post方式，具体指定后，问题解决。

其中@CrossOrigin中的2个参数：

origins:允许可访问的域列表

maxAge:准备响应前的缓存持续的最大时间(以秒为单位)。

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

*/@CrossOrigin

@RestController

publicclassperson{

publicStringadd(){

//若干代码

}

}

@CrossOrigin

@GetMapping(/{id})

Longid)

{

//...

}

}

方法二过滤器

publicclassCORSFilterimplementsFilter{

@Override

publicvoiddestroy(){

//TODOAuto-generatedmethodstub

}

@Override

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

//允许访问的方法

OPTIONS,DELETE);

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

x-requested-with,Content-Type);

//:该值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包

括在CORS请求之中，设置为true,即表示服务器明确许可

chain.doFilter(req,res);

}

@Override

//TODOAuto-generatedmethodstub

}

Web.xml

!--跨域配置--

filter

init-param

param-nameIsCross/param-name

param-valuetrue/param-val