聊一聊ajax如何跨域

最新推荐文章于 2024-04-10 01:07:41 发布

X可乐

最新推荐文章于 2024-04-10 01:07:41 发布

阅读量271

点赞数

CC 4.0 BY-SA版权

文章标签： ajax jsonp

本文链接：https://blog.youkuaiyun.com/CS_DGD/article/details/105417484

ajax能跨域吗？

我们现在来测试一下

首先准备两个后端服务器

第一个

const Koa = require("koa");
const static = require("koa-static");
const Router = require("koa-router");

let app = new Koa();
let router = new Router();

app.use(static(__dirname+"/static"));

router.get("/",ctx=>{
    ctx.body={
        name: "张三",
        age:21
    }
});

app.use(router.routes());
app.listen(3000)

第二个

const Koa = require("koa");
const static = require("koa-static");
const Router = require("koa-router");

let app = new Koa();
let router = new Router();

app.use(static(__dirname+"/static"));

router.get("/",ctx=>{
    ctx.body={
        name: "张三",
        age:21
    }
});
router.get("/getAjax",ctx=>{
    console.log("running......");
    ctx.body = "var a = 20";
});

app.use(router.routes());
app.listen(4000)

然后准备一个前端页面

注意点：

准备的两个终端都要运行！
ajax下的open方法，第二个参数的路由/路径设置为跨域访问的路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点我请求ajax</button>
    <script>
        let btn = document.querySelector("button");

        btn.onclick = function(){
            let xhr = new XMLHttpRequest();
            xhr.open("get","http://localhost:4000/getAjax",true);
            xhr.onload = function(){
                console.log(xhr.responseText)
            }
            xhr.send();
        }
    </script>
</body>
</html>

浏览器反馈
在这里插入图片描述
根据测试的结果我们可以得出，ajax自身并不能跨域

如果需要用到ajax跨域，我们可以借助jsonp的方法

jsonp原理：
利用了script标签和img标签的特性，同源策略是浏览器这边的，限制不了这两个标签。

准备一个前端页面

<body>
	// 引入网络路径，通过跨域访问到地址
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	// 引入网络路径，通过跨域访问到图片
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586441063897&di=77229595c6d8a194a925dd78f91bce7a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F78%2F52%2F01200000123847134434529793168.jpg" alt="" style="width: 420px; height: 595px;">
	
	// 引入本地路径，通过跨域访问到地址
    <script src="http://localhost:4000/getAjax"></script>
    
    <script>
        console.log(Vue);
        console.log(a)
    </script>
</body>

准备一个后端服务器

服务器还是上方准备的两个服务器

注意点：
服务端没有返回任何东西的话也、会报错

router.get("/getAjax",ctx=>{
    console.log("running......");
    ctx.body = "var a = 20";
});

浏览器反馈
在这里插入图片描述
访问成功

但是注意 通常后端给我们返回的数据都是一些比较复杂的，不会使我们做测试的
var a = 20这种简单的数据，所以我们需要稍微优化一下代码。

优化代码：

<body>
    <button>点我获取跨域资源</button>
    <script>
        let btn = document.querySelector("button");
		btn.onclick = function(){
			let port = 4000;
            let o = document.createElement("script");
            // o.src = `http://localhost:${port}/getAjax?cb=cbfn`;
            o.src = "http://localhost:4000/getAjax?cb=cbfn";
            document.querySelector("head").appendChild(o);
            // console.log(a);//同步的问题直接加载过了，所以会报错，找不到
            o.onload = function(){
                console.log(a);
            }
         }
    </script>
</body>

注意： 虽然小功能都可以使用了，但是解决方式还是存在一些问题。所以不是很推荐这种方式！！！

继续优化

前端页面处理

<body>
    <button>点我获取跨域资源</button>
    <script>
        let btn = document.querySelector("button");

		// 传递一个函数去后端，然后后端将携带参数的函数返回
        function cbfn(res){
            console.log(res)
        };
        
		btn.onclick = function(){
			let port = 4000;// 这里需要前后端协调处理
            let o = document.createElement("script");
            /*
                属性名叫做cb还是callback需要和后端协商
                cb把cbfn()这个函数体返回给了后端
            */ 
            o.src = `http://localhost:${port}/getAjax?cb=cbfn`;
            document.querySelector("head").appendChild(o);
            
            o.onload = function(){
                console.log(a);
            }
        }
    </script>
</body>

后端服务器处理

router.get("/getAjax",ctx=>{
    // console.log("running......");
    // ctx.body = "var a = 20";

    let obj = {
        name:"小李",
        age:20
    }

    // 这里的cb 是前后端人员共同拟定的名字
    let cb = ctx.query.cb;
    console.log(cb);

    // 将参数传递回前端
    ctx.body = `${cb}(${JSON.stringify(obj)})`;

    
});

封装jsonp文件

上一篇博客为专门封装jsonp的博客，请移步查看

ajax实现jsonp文件

注意：

后端服务器不变
前端页面引入jsonp.js文件

<body>
    <button>点击请求jsonp</button>
    <script src="jsonp.js"></script>
    <script>

        let btn = document.querySelector("button");

        btn.onclick = function(){
            
            ajax({
                url:"http://localhost:4000/getAjax",
                data:{
                    name:"张三",
                    age:20
                },
                dataType:"jsonp",
                jsonp:"cb",
                success:function(res){
                    console.log(res)
                }
            });
        }

    </script>
</body>