模拟请求发生跨域问题

Nuyoahll-_-ll

于 2023-03-22 23:07:59 发布

阅读量440

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43566782/article/details/129720583

版权

文章讨论了一个在尝试使用axios进行GET请求时遇到的跨域问题。当请求PHP服务时，由于缺少Access-Control-Allow-Origin头，浏览器阻止了XMLHttpRequest。作者提到这个问题可以通过服务端配置CORS策略来解决，并且在请求SpringBoot项目时没有出现相同问题。文章是关于前端开发中处理跨域请求的一个实例。

摘要由CSDN通过智能技术生成

参考：传送门
问题产生：
Access to XMLHttpRequest at ‘http://test-cms.jinhuahuolong.com/api/pages/list’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
看了半天可能只能服务端解决好一点？因为我请求的是php服务，直接报了跨域错误，我又请求了springboot项目正常了。
主要是练习axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"  href="./layui-v2.7.6/layui/css/layui.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <button type="button" class="layui-btn" id="sendGet">发送get请求</button>
    <a href="" class="layui-btn">一个可跳转的按钮</a>
    <script>
        const sendGet=document.getElementById("sendGet");
        console.log(sendGet);
        sendGet.addEventListener("click",function(){
            axios({
                url:'http://xxx/v2/api/pages/list',
                headers:{
                    'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC90ZXN0LWNtcy5qaW5odWFodW9sb25nLmNvbVwvYXBpXC9hdXRoXC9sb2dpbiIsImlhdCI6MTY3OTQ2OTI5MiwiZXhwIjoxNjc5NTEyNDkyLCJuYmYiOjE2Nzk0NjkyOTIsImp0aSI6Ik52QzhlUnJxRXN5N2dWa2IiLCJzdWIiOjMsInBydiI6IjU1ZjhmMDUzMzMxN2MxZjIyZWEzYzZmNDhkYTlhMjk4MjRmODhmYmQifQ.XOSXGBxPF-dfNyJfLsK-HHVIKZfO0QBgs_9YQkndeZg',
                }
            })//返回一个Promise对象可以调用 then 成功 catch 失败
            .then(response =>{
                console.log(response);
            }).catch(error => {
                console.log(error);
            })
        })
        //console.log("123");
        
    </script>
</body>
</html>