ajax同源

最新推荐文章于 2023-01-23 09:30:00 发布

仰望星空的快乐

最新推荐文章于 2023-01-23 09:30:00 发布

阅读量363

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/sharesb/article/details/124285048

版权

ajax 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

ajax默认只能接收来自同一个协议 ip地址端口号的请求，

即如果请求是 http://127.0.0.1/8080/ 则只有http://127.0.0.1/8080/ 的服务器才可以响应

解决方案1：

但是要求返回的必须是函数的调用语句

下面的例子中，服务器只能返回函数的调用语句，json格式的字符都不可以，而且这是src，不是正常的ajax请求，不知道怎么设置请求头和请求体，所以这么写没什么用？

<!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>
    <style>
        #text {
            width: 200px;
            height: 200px;
            background: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="text"></div>
    <script src=".\js\app.js" type="text/javascript" charset="utf-8"></script>
    <br>
    <div id="display"></div>
    <input id="test2"></input>
    <script>
        function handel(data){
            var text =document.getElementById("display");
            text.innerHTML=data.msg;
        }
    </script>
</body>

</html>
<script>
   var test2=document.getElementById("test2");
   test2.onmousemove=function(){
       var script= document.createElement("script");
       script.setAttribute("src","http://127.0.0.1:8000/check");
       document.body.appendChild(script);
   }
</script>

app.all('/check', (request, response) => {
    // response.setHeader('Access-Control-Allows-Origin','*');s
    const data =
    {
        exist: 1,
        msg: '用户已经存在'
    };
    let str = JSON.stringify(data);
    // 返回handel({"exist":1,"msg":"用户已经存在"})
    // 是一个函数调用,把参数填了的函数调用,而函数定义在该html中
    response.end('handel('+str+')');
});

解决方案2使用jquery的getjson：

<!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>
</head>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<body>
     <div id="div1"></div>
     <button id="btn1">点击使用jquery提交jsonp</button>
</body>
</html>
<script>
    $("#btn1").click(
        function()
        {//getJSON不能像get post ajax请求一样当有返回值时自动调用回调函数，
            // 需要手动调用，见express.js文件
            $.getJSON('http://127.0.0.1:8000/jquery-json-crosszon?callback=?'
            ,function(data)
            {
                  console.log(data.msg);
            }
            )
        }
    )
</script>

app.all('/jquery-json-crosszon', (request, response) => {
    // response.setHeader('Access-Control-Allows-Origin','*');s
    const data =
    {
        exist: 1,
        msg: '用户已经存在'
    };
    // 获得callback参数,
    // 这个参数的值，就是我jquery的第二个参数的函数名，即回调函数
    // 为了能让jquery使用回调函数，我必须手动调用该函数
    let cb=request.query.callback;
    let str = JSON.stringify(data);
    // 返回handel({"exist":1,"msg":"用户已经存在"})
    // 是一个函数调用,把参数填了的函数调用,而函数定义在该html中
    // 比如说函数名是a ，数据是b 拼接出a(b)
    response.end(cb+'('+str+')');
});

解决方案3（推荐，且是官方的）：

在服务器中添加一句话：

response.setHeader('Access-Control-Allow-Origin', '*');

app.get('/server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应
    var a = { 'a': '10' };
    var b = [1, 2, 3, 4];
    response.send(b);
});