SpringBoot:处理跨域请求
一、跨域背景
1.1 何为跨域?
url
的一般格式:
协议 + 域名(子域名 + 主域名) + 端口号 + 资源地址
示例:
https://www.dustyblog.cn:8080/say/hello
是由
https
+ www
+ dustyblog.cn
+ 8080
+ say/hello
组成。
只要协议,子域名,主域名,端口号这四项组成部分中有一项不同,就可以认为是不同的域,不同的域之间互相访问资源,就被称之为跨域。
1.2 一次正常的请求
- controller层代码:
@requestmapping("/demo") @restcontroller public class corstestcontroller { @getmapping("/sayhello") public string sayhello() { return "hello world !"; } }
- 启动项目,测试请求
浏览器打开localhost:8080/demo/sayhello
可以打印出“hello world”
1.3 跨域测试
以chrome为例:
打开任意网站,如:
按f12,打开【开发者工具】,在里面的【console】可以直接输入js代码测试;
var token= "ltsfvqkxvps1nparxs2lpus2q2ipgstidmrs8zmhnv3rt7rknhln6d2ffirkvezvieexgehgi/ptnyngqjzlygkja4+zyixxtdmok/n+ab6wtsskyxereh3ar8kwerwirvx+uofveh3dgmdw1347syjbl/ilgkx5xkozcbfb1f0=,lzkg22zbnsuohagauapebn541x5ohuk7rlvnhshwdm/ba4dcip1f/3bnu4gaelqu6cds/0fg9li5csphe8pyhr1ii/tncuyxqhmf9bhyd6ugwoftfvlmtp6rdopvrpg24rsjjbwy2kuoojjk5uv6futmbrstvobezaxykzmm2m4=,r4qed2psvrtr8tkbtjnnfubw+yr4di+gtogjwyer7qzk9hlduvllzuseepwjtbpz+uurvmplin5wm9ge29ft5as4okddplih8kwnis9y3r9tgh3mnsutgrgayanniy9ji5wnziz9ce2cfzlxoyuzxocsvfoxuw70ty0uklvm/78="; var xhr = new xmlhttprequest(); xhr.open('get', 'http://127.0.0.1:8080/demo/sayhello'); xhr.setrequestheader("x-access-token",token); xhr.send(null); xhr.onload = function(e) { var xhr = e.target; console.log(xhr.responsetext); }
- 输入完后直接按回车键就可以返回结果:
access to xmlhttprequest at 'http://127.0.0.1:8080/demo/sayhello' from origin 'https://blog.csdn.net' has been blocked by cors policy: no 'access-control-allow-origin' header is present on the requested resource.
该结果表明:该请求在https://blog.csdn.net
域名下请求失败!
二、解决方案 - cors跨域
2.1 cors是什么
cors
全称为cross origin resource sharing
(跨域资源共享), 每一个页面需要返回一个名为access-control-allow-origin
的http头来允许外域的站点访问,你可以仅仅暴露有限的资源和有限的外域站点访问。
我们可以理解为:如果一个请求需要允许跨域访问,则需要在http
头中设置access-control-allow-origin
来决定需要允许哪些站点来访问。如假设需要允许这个站点的请求跨域,则可以设置:
access-control-allow-origin:https://www.dustyblog.cn。
2.2 方案一:使用@crossorigin
注解
2.2.1 在controller
上使用@crossorigin
注解
该类下的所有接口都可以通过跨域访问
@requestmapping("/demo2") @restcontroller //@crossorigin //所有域名均可访问该类下所有接口 @crossorigin("https://blog.csdn.net") // 只有指定域名可以访问该类下所有接口 public class corstest2controller { @getmapping("/sayhello") public string sayhello() { return "hello world --- 2"; } }
这里指定当前的corstest2controller
中所有的方法可以处理https://csdn.net
域上的请求,这里可以测试一下:
- 在页面打开调试窗口,输入(注意:这里请求地址是
/demo2
,请区别于1.2 案例中的/demo
)
var token= "ltsfvqkxvps1nparxs2lpus2q2ipgstidmrs8zmhnv3rt7rknhln6d2ffirkvezvieexgehgi/ptnyngqjzlygkja4+zyixxtdmok/n+ab6wtsskyxereh3ar8kwerwirvx+uofveh3dgmdw1347syjbl/ilgkx5xkozcbfb1f0=,lzkg22zbnsuohagauapebn541x5ohuk7rlvnhshwdm/ba4dcip1f/3bnu4gaelqu6cds/0fg9li5csphe8pyhr1ii/tncuyxqhmf9bhyd6ugwoftfvlmtp6rdopvrpg24rsjjbwy2kuoojjk5uv6futmbrstvobezaxykzmm2m4=,r4qed2psvrtr8tkbtjnnfubw+yr4di+gtogjwyer7qzk9hlduvllzuseepwjtbpz+uurvmplin5wm9ge29ft5as4okddplih8kwnis9y3r9tgh3mnsutgrgayanniy9ji5wnziz9ce2cfzlxoyuzxocsvfoxuw70ty0uklvm/78="; var xhr = new xmlhttprequest(); xhr.open('get', 'http://127.0.0.1:8080/demo2/sayhello'); xhr.setrequestheader("x-access-token",token); xhr.send(null); xhr.onload = function(e) { var xhr = e.target; console.log(xhr.responsetext); }
返回结果:
ƒ (e) { var xhr = e.target; console.log(xhr.responsetext); } vm156:8 hello world --- 2
说明跨域成功!
- 换个域名测试一下看跨域是否还有效,在按照上述方法测试一下,返回结果:
options http://127.0.0.1:8080/demo2/sayhello 403 (anonymous) access to xmlhttprequest at 'http://127.0.0.1:8080/demo2/sayhello' from origin 'http://www.cnblogs.com' has been blocked by cors policy: response to preflight request doesn't pass access control check: no 'access-control-allow-origin' header is present on the requested resource.
说明跨域失败!证明该方案成功指定了部分域名能跨域!
2.3 方案二:cors全局配置-实现webmvcconfigurer
- 新建跨域配置类:
corsconfig.java
:
/** * 跨域配置 */ @configuration public class corsconfig implements webmvcconfigurer { @bean public webmvcconfigurer corsconfigurer() { return new webmvcconfigurer() { @override public void addcorsmappings(corsregistry registry) { registry.addmapping("/**"). allowedorigins("https://www.dustyblog.cn"). //允许跨域的域名,可以用*表示允许任何域名使用 allowedmethods("*"). //允许任何方法(post、get等) allowedheaders("*"). //允许任何请求头 allowcredentials(true). //带上cookie信息 exposedheaders(httpheaders.set_cookie).maxage(3600l); //maxage(3600)表明在3600秒内,不需要再发送预检验请求,可以缓存该结果 } }; } }
- 测试,在允许访问的域名控制台输入(注意,这里请求的是http://127.0.0.1:8080/demo3):
var token= "ltsfvqkxvps1nparxs2lpus2q2ipgstidmrs8zmhnv3rt7rknhln6d2ffirkvezvieexgehgi/ptnyngqjzlygkja4+zyixxtdmok/n+ab6wtsskyxereh3ar8kwerwirvx+uofveh3dgmdw1347syjbl/ilgkx5xkozcbfb1f0=,lzkg22zbnsuohagauapebn541x5ohuk7rlvnhshwdm/ba4dcip1f/3bnu4gaelqu6cds/0fg9li5csphe8pyhr1ii/tncuyxqhmf9bhyd6ugwoftfvlmtp6rdopvrpg24rsjjbwy2kuoojjk5uv6futmbrstvobezaxykzmm2m4=,r4qed2psvrtr8tkbtjnnfubw+yr4di+gtogjwyer7qzk9hlduvllzuseepwjtbpz+uurvmplin5wm9ge29ft5as4okddplih8kwnis9y3r9tgh3mnsutgrgayanniy9ji5wnziz9ce2cfzlxoyuzxocsvfoxuw70ty0uklvm/78="; var xhr = new xmlhttprequest(); xhr.open('get', 'http://127.0.0.1:8080/demo3/sayhello'); xhr.setrequestheader("x-access-token",token); xhr.send(null); xhr.onload = function(e) { var xhr = e.target; console.log(xhr.responsetext); }
输出结果
ƒ (e) { var xhr = e.target; console.log(xhr.responsetext); } vm433:8 hello world --- 3
说明跨域成功,换个网址如测试依旧出现需要跨域的错误提示,证明该配置正确,该方案测试通过。
2.3 拦截器实现
通过实现fiter
接口在请求中添加一些header
来解决跨域的问题
@component public class corsfilter implements filter { @override public void dofilter(servletrequest request, servletresponse response, filterchain chain) throws ioexception, servletexception { httpservletresponse res = (httpservletresponse) response; res.addheader("access-control-allow-credentials", "true"); res.addheader("access-control-allow-origin", "*"); res.addheader("access-control-allow-methods", "get, post, delete, put"); res.addheader("access-control-allow-headers", "content-type,x-caf-authorization-token,sessiontoken,x-token"); if (((httpservletrequest) request).getmethod().equals("options")) { response.getwriter().println("ok"); return; } chain.dofilter(request, response); } @override public void destroy() { } @override public void init(filterconfig filterconfig) throws servletexception { } }