• 跨域及cors解决跨域

    1.什么是跨域

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

    协议，主机（ip）,端口号，这三个有一个不同就属于跨域访问

    跨域访问前端和后端不设置一些东西的话，不能访问

    当前页面URL被请求页面URL是否跨域原因
    http://www.test.com/http://www.test.com/index.html否同源（协议、域名、端口）
    http://www.test.com/https://www.test.com/index.html跨域协议不同
    http://www.test.com/http://www.test1.com/跨域域名不同
    http://www.test.com:8080/http://www.test.com:8081/跨域端口不同

    2. 跨域问题的解决方案

    比较常用的3种

    1.Jsonp  最早的解决方案，利用script标签可以跨域的原理实现。

            前端解决方案，不知道好不好用，

    2. nginx反向代理

            思路是：利用nginx反向代理把跨域改为不跨域，支持各种请求方式

            缺点：需要在nginx进行额外配置，语义不清晰

     3.CORS【重要】

    • 规范化的跨域请求解决方案，安全可靠。

      优势：

      • 在服务端进行控制是否允许跨域，可自定义规则

      • 支持各种请求方式            

            缺点：

                    会产生额外请求

    cors是一种机制，这种机制通过在http头部添加字段，

    通常情况下，web应用A告诉浏览器，自己有权限访问应用B

     CORS的标准定义是:通过设置http头部字段，让客户端有资格跨域访问资源。通过服务器的验证和授权之后，浏览器有责任支持这些http头部字段并且确保能够正确的施加限制。

     JSON与CORS的比较

            1.JSONP 只能实现 GET 请求，而 CORS 支持所有类型的 HTTP 请求

            2.使用 CORS ，开发者可以是使用普通的 XMLHttpRequest 发起请求和获取数据，比起 JSONP 有更好的错误处理

            3.虽然绝大多数现代的浏览器都已经支持 CORS，但是 CORS 的兼容性比不上 JSONP，一些比较老的浏览器只支持 JSONP

     3.SpringBoot通过CORS实现跨域

    3.1 使用注解实现跨域

    1. @CrossOrigin(origins = "*")
    2. @Slf4j
    3. @RestController
    4. public class EmployeeController {
    5.     
    6. }

    1. @RestController
    2. @CrossOrigin(origins = "*")//实行全局跨域
    3. @Slf4j
    4. public class HelloController {
    5.     @Reference
    6.     private HelloService helloService;
    7.  
    8.     @GetMapping(value = "/hello",name = "测试")
    9.     public ResponseEntity hello(@RequestParam String name){
    10.         String hello = helloService.hello(name);
    11.         return ResponseEntity.ok(hello);
    12.     }
    13.  
    14. }
    1. @RestController
    2. public class HiController {
    3.  
    4.     @Reference
    5.     private HiService hiService;
    6.  
    7.     @GetMapping(value = "/hi")
    8.     public ResponseEntity hiName(@RequestParam String name){
    9.         String respHiName = hiService.hiName(name);
    10.         return ResponseEntity.ok(respHiName);
    11.     }
    12.  
    13. }

     我们可以看到，后端有连个controller   HiController中没有添加@CrossOrigin(origins = "*")

    跨域访问试试看

     前端：

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Documenttitle>
    8.   <script src="js/axios-0.18.0.js">script>
    9. head>
    10. <body>
    11.   <button id="hello">hellobutton>
    12.   <button id="hi">hibutton>
    13.   <script>
    14.     var hello = document.getElementById("hello");
    15.     var hi = document.getElementById("hi");
    16.     hello.onclick = function(){
    17.       axios.get("http://localhost:8082/hello?name=张三")
    18.       .then(resp=>{
    19.         alert(resp.data);
    20.       })
    21.     }
    22.     hi.onclick = function(){
    23.       axios.get("http://localhost:8082/hi?name=张三")
    24.       .then(resp=>{
    25.         alert(resp.data);
    26.       })
    27.     }
    28.   script>
    29. body>
    30. html>

     

     

     首先肯定是跨域，点击hi 的话会报错，当hiController中添加@CrossOrigin(origins = "*")

    就ok了

     

    2.通过全局配置解决跨域请求

     如果说你有好多Controller 每一个都要配置，那么不值当的，所有可以用这种方法

    1. @Configuration
    2. public class DemoWebMvcConfig implements WebMvcConfigurer {
    3.     @Override
    4.     public void addCorsMappings(CorsRegistry registry) {
    5.         registry.addMapping("/**")  // 匹配了所有的URL
    6.                 .allowedHeaders("*")  // 允许跨域请求包含任意的头信息
    7.                 .allowedMethods("*")  // 设置允许的方法
    8.                 .allowedOrigins("*")  // 设置允许跨域请求的域名
    9.                 .allowCredentials(false);  // 是否允许证书，默认false
    10.     }
    11. }

     

     

  • 相关阅读:
    等保: Postgresql配置ssl链接
    Go学习之路：并发（DAY 3）
    案例突破——再探策略模式
    小白学习，在kali里面用volatility3，一步一步细致操作，解决问题。建议电子取证选手好好看看。
    Markov Chain Fingerprinting to Classify Encrypted Traffic 论文笔记
    windows什么录屏软件好用，windows屏幕录制软件
    Spring Boot中的max-http-header-size配置
    【项目设计】网络对战五子棋（上）
    撰写论文时常用的研究方法有哪些？
    低代码平台选型6大能力：品牌/产品/技术/服务/安全/价值
  • 原文地址：https://blog.csdn.net/weixin_50769390/article/details/127905030