admin管理员组

文章数量:1130349

一.简介

这篇文章主要是解释什么是跨域，在Spring中如何解决跨域，引入Spring Security后Spring解决跨域的方式失效，Spring Security 如何解决跨域的问题。

二.什么是跨域

跨域的概率：

浏览器不能执行其他网站的脚本，从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。跨域是由浏览器的同源策略造成的，是浏览器施加的安全限制。a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的。

三.演示跨域

3.1创建项目

如何创建一个SpringSecurity项目，前面文章已经有说明了，这里就不重复写了。

3.2后端接口

代码如下：

@RequestMapping
@RestController
public class IndexController {
    @PostMapping("/cors")
    public String hello() {
        return "hello";
    }
}

3.3前端页面

代码如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <!-- <script src="https://unpkg/vue@next"></script> -->
  <script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://unpkg/axios/dist/axios.min.js"></script>
 </head>
 <body>
  <div >
   <button @click="sendCorsRequest">发起跨域请求</button>
  </div>
  <script>
   const App = {
    data() {
     return {
     }
    },
    methods: {
     sendCorsRequest() {
      axios.post('http://localhost:8080/cors', {
       firstName: 'Fred',
       lastName: 'Flintstone'
      })
      .then(function (response) {
       console.log(response)
      })
      .catch(function (error) {
       console.log(error);
      });
     }
    },
    
   };
   Vue.createApp(App).mount('#app');
  </script>
 </body>
</html>

3.4演示

打开页面，截图如下：

点击按钮，发送跨域请求，最终也发生了跨域请求，截图如下：

一.简介

这篇文章主要是解释什么是跨域，在Spring中如何解决跨域，引入Spring Security后Spring解决跨域的方式失效，Spring Security 如何解决跨域的问题。

二.什么是跨域

跨域的概率：

浏览器不能执行其他网站的脚本，从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。跨域是由浏览器的同源策略造成的，是浏览器施加的安全限制。a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的。

三.演示跨域

3.1创建项目

如何创建一个SpringSecurity项目，前面文章已经有说明了，这里就不重复写了。

3.2后端接口

代码如下：

@RequestMapping
@RestController
public class IndexController {
    @PostMapping("/cors")
    public String hello() {
        return "hello";
    }
}

3.3前端页面

代码如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <!-- <script src="https://unpkg/vue@next"></script> -->
  <script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://unpkg/axios/dist/axios.min.js"></script>
 </head>
 <body>
  <div >
   <button @click="sendCorsRequest">发起跨域请求</button>
  </div>
  <script>
   const App = {
    data() {
     return {
     }
    },
    methods: {
     sendCorsRequest() {
      axios.post('http://localhost:8080/cors', {
       firstName: 'Fred',
       lastName: 'Flintstone'
      })
      .then(function (response) {
       console.log(response)
      })
      .catch(function (error) {
       console.log(error);
      });
     }
    },
    
   };
   Vue.createApp(App).mount('#app');
  </script>
 </body>
</html>

3.4演示

打开页面，截图如下：

点击按钮，发送跨域请求，最终也发生了跨域请求，截图如下：

本文标签： SpringBootSpringSecurity

版权声明：本文标题：Springboot +spring security，解决跨域问题 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/jiaocheng/1754940749a2744248.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。