5.跨域处理
一、跨域背景
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为例：
- 打开任意网站，如：https://blog.csdn.net
- 按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来决定需要允许哪些站点来访问。如假设需要允许https://www.dustyblog.c这个站点的请求跨域，则可以设置：
Access-Control-Allow-Origin:https://www.dustyblog.cn。
2.2 方案一：使用@CrossOrigin注解
2.2.1 在Controller上使用@CrossOrigin注解
该类下的所有接口都可以通过跨域访问
("/demo2") //@CrossOrigin //所有域名均可访问该类下所有接口 ("https://blog.csdn.net") // 只有指定域名可以访问该类下所有接口 public class CorsTest2Controller { ("/sayHello") public String sayHello() { return "hello world --- 2"; } }
这里指定当前的CorsTest2Controller中所有的方法可以处理https://csdn.net域上的请求,这里可以测试一下：
- 在https://blog.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
说明跨域成功！
- 换个域名测试一下看跨域是否还有效，在https://www.baidu.com按照上述方法测试一下，返回结果：
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.
