SpringBoot解决跨域问题

最新推荐文章于 2024-05-06 18:35:01 发布

whqObito

最新推荐文章于 2024-05-06 18:35:01 发布

阅读量120

点赞数

分类专栏： Java spring boot 文章标签： vue java web

本文链接：https://blog.csdn.net/wuqihawubito/article/details/118784230

版权

Java 同时被 2 个专栏收录

72 篇文章 1 订阅

订阅专栏

spring boot

14 篇文章 0 订阅

订阅专栏

今天第一次使用前后端分离，就碰到了跨域问题，接下来看看是怎么解决的：

文章目录

问题：
解决方案：
- 修改服务端

问题：

现在我的前端代码是 5050 端口，然后后端是在8080端口：
前端的HTML文件：

<head title="first">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/require.js"></script>
</head>
<body>
    <div id="myapp">
        {{message}}
        <button v-on:click="sayHello">say hello!</button>
    </div>
<script>
    new Vue({
        el: "#myapp",
        data: {
            message: "hello,vue"
        },
        methods: {
            sayHello: function(){
             // Send a POST request
            axios({
            method: 'get',
            url: 'http://localhost:8080/str',
            }).then(function(response){
                console.log(response)
            })
            }
        }
    })
</script>
</body>

可以看到，我要用Axios去访问后端的 http://localhost:8080/str，
后端代码如下：

@RestController
public class My_Controller {
    @RequestMapping("/str")
    public String getstr(){
        return "hello.vue";
    }
}

当实现的时候，发现出现了跨域问题：
在这里插入图片描述

解决方案：

修改服务端

Spring Boot本身就提供了解决跨域问题的方法：
直接在Controller类里面使用@CrossOrigin 即可

@RestController
@CrossOrigin
public class My_Controller {
    @RequestMapping("/str")
    public String getstr(){
        return "hello.vue";
    }
}

然后再去访问的时候，发现跨域问题消失了：
在这里插入图片描述

whqObito

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录