JavaScript(9)--- 跨域

#JavaScript(9)--- 跨域 ## 一、跨域原理(同源策略) 在项目搭建的初期,因为现在项目基本上都是前后端分离，所以不可避免地会遇到跨域问题，而造成跨域的罪魁祸首就是浏览器的同源策略。所以要解决跨域， 我们必须知道什么是浏览器的同源策略。 #### 1、什么是同源策略 `概念` 它是一个著名的安全策略。所有支持JavaScript 的浏览器都会使用这个策略。所谓`同源是指，域名，协议，端口相同`。 当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。 `注意` **跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了**。 #### 2、同源策略限制什么 `概念` 同源策略限制 **从一个源加载的文档或脚本如何与来自另一个源的资源进行交互**。这是一个用于隔离潜在恶意文件的关键的安全机制。它的存在可以保护 用户隐私信息，防止身份伪造等(读取Cookie)。 **同源策略限制内容有** ``` 1、Cookie、LocalStorage、IndexedDB 等存储性内容 2、DOM 节点 3、AJAX 请求不能发送 ``` **但是有三个标签是允许跨域加载资源** ``` 1. ``` `后段代码` ```java @RestController public class UserController { @GetMapping(value = "/getUser/{id}") public String getUser(@PathVariable("id") String id, String callback) { // 拼接方法名 + 参数（这就会调用上面script中的coming方法） return callback + "({\"username\": \"小小\",\"age\": 4 "})"; } } ``` #### 2、jquery示例 上面说过了，JSONP其实算是一种对同源策略规则的投机取巧，实现方式可以多种多样。JQuery对JSONP也有实现 ```html ``` `总结` ``` 1、JSONP都是GET和异步请求的，不存在其他的请求方式和同步请求，且jQuery默认就会给JSONP的请求清除缓存。 2、JSONP优点是 兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是 仅支持get方法具有局限性。 ```
## 三、CORS #### 1、CORS原理 浏览器认为只要后端没返回CORS头(**Access-Control-Allow-Origin**)，就认为后端不允许跨域，返回的数据不可靠。所以只要后端能够返回浏览器需要的请求头， 即可跨域（响应数据就不会被同源策略抛弃），这个是表层原理。 不过目前不是所有浏览器都支持该功能(会自动带上请求头)，IE浏览器不能低于IE10。所以最终来看，`CORS这种方案不需要前端做任何事情，只需后端配合即可`。 #### 2、示例 `前端代码` ```html ``` `后段代码` **方式一** 方法上加@CrossOrigin ```java @RestController public class UserController { /** * 在跨域方法上加@CrossOrigin即可完美解决跨域问题 */ @CrossOrigin("http://localhost:8088") @GetMapping(value = "/getUser/{id}") public User getUser(@PathVariable("id") String id) { User user = new User(); user.setName("小小"); user.setAge(4); return user; } } ``` **方式二** Controller上加@CrossOrigin @CrossOrigin还可以加载Controller上，这样Controller的所有方法都支持跨域。 ``` @RestController @CrossOrigin("http://localhost:8088") public class UserController { @GetMapping(value = "/getUser/{id}") public User getUser(@PathVariable("id") String id) { User user = new User(); user.setName("小小"); user.setAge(4); return user; } } ``` **方式三** @Bean配置跨域Filter ``` @Configuration public class CorsConfig { @Bean public CorsFilter corsFilter() { //1.添加CORS配置信息 CorsConfiguration config = new CorsConfiguration(); //1) 允许的域,如果写*，那么cookie就无法使用了 config.addAllowedOrigin("http://localhost:8088"); //2) 是否发送Cookie信息 config.setAllowCredentials(true); //3) 允许的请求方式 config.addAllowedMethod("*"); // 4）允许的头信息 config.addAllowedHeader("*"); // 5) 有效时长 config.setMaxAge(3600L); //2.添加映射路径，我们拦截一切请求 UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource(); configSource.registerCorsConfiguration("/**", config); //3.返回新的CorsFilter. return new CorsFilter(configSource); } } ``` `总结` 本人在实际开发中都是通过CORS解决跨域问题，而且是通过第三种方式配置全局的bean对象。
### 参考 1、[同源策略与跨域](https://zhuanlan.zhihu.com/p/104984869) 2、[javascript跨域的四种方式介绍](https://www.php.cn/js-tutorial-412039.html) 3、[什么是JS跨域访问？](https://www.zhihu.com/question/26376773/answer/244453931)

``` 别人骂我胖，我会生气，因为我心里承认了我胖。别人说我矮，我就会觉得好笑，因为我心里知道我不可能矮。这就是我们为什么会对别人的攻击生气。 攻我盾者，乃我内心之矛(7)。 ```