已拦截跨源请求：同源策略禁止读取位于 http://....../test.do 的远程资源。（原因：CORS 头缺少 'Access-Control-Allo

最新推荐文章于 2024-04-07 11:22:35 发布

谬了个大也

最新推荐文章于 2024-04-07 11:22:35 发布

阅读量3k

点赞数 2

分类专栏：前端学习文章标签： vue 接口

本文链接：https://blog.csdn.net/my_miuye/article/details/105198455

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

访问后端接口时，报错如下：
在这里插入图片描述
同源是指：域名、协议、端口相同

解决方案一：
在对应方法上加注解：@CrossOrigin(origins = “*”)
在这里插入图片描述
加后可以正常获得接口数据：

附前端测试代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我他娘的想要你的接口</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="测试接口" @click="getmessage">
        {{ message }}
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "hahahaha笑死你"
            },
            methods: {
                getmessage: function () {
                    var that = this; 
                    axios.get("你要测试的接口的url").then(function (response) {
                            console.log(response);
                            that.message = response.data;
                        },
                        function (err) {
                            console.log(err)
                        })
                }
            }
        })
    </script>

</body>

</html>

解决方案二：
在方法比较多的情况下，可以写一个跨域配置类，具体代码参考下面链接
https://blog.csdn.net/ZBYTSL/article/details/103923559

谬了个大也

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
已拦截跨源请求：同源策略禁止读取位于 http://....../test.do 的远程资源。（原因：CORS 头缺少 'Access-Control-Allo

访问后端接口时，报错如下：同源是指：域名、协议、端口相同解决方案一：在对应方法上加注解：@CrossOrigin(origins = “*”)加后可以正常获得接口数据：附前端测试代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt...
复制链接

扫一扫