前端跨域常见解决方案

最新推荐文章于 2025-08-29 10:08:41 发布

原创最新推荐文章于 2025-08-29 10:08:41 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

一、jsonp跨域

jsonp跨域原理

script、img、link、iframe,这些标签不存在跨域请求的限制
jsonp跨域请求即是利用了script标签不存在跨域请求的限制这一特点

jsonp跨域请求的原理图如下：
在这里插入图片描述
【示例一】

自创建服务器，并向其请求数据

---serverJsonp.js
//创建jsonp跨域服务器端(http:/127.0.0.1:8001\list)
let express = require("express");
app = express();
app.listen(8001,()=>{
   console.log("127.0.0.1:8001")
});

app.get("/list",(req,res)=>{
    let {
        callback=Function.prototype
    } = req.query;    //由客户端接收到的函数callback
    let data = {      //向客户端返回的数据
        code:0,
        message:"服务器准备的数据"
    };
    //返回callback(data) 字符串
    res.send(`${callback}(${JSON.stringify(data)})`);
})

---jsonp.js
//客户端请求
$.ajax({
    method:"get",
    url:":http://127.0.0.1:8001\list",
    dataType:"jsonp",   //执行的为jsonp请求
    success:res=>{
        console.log(res);
    }    
});

---jsonp.html
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--加载jsonp的js代码-->
<script src="./jsonp.js"></script>

启动服务器

PS E:\vscode\node\跨域\jsonpkuayu> node serverJsonp
127.0.0.1:8001

浏览器打开html页面，输出请求到地数据
在这里插入图片描述

【示例二】

常见api 请求，以百度关键字搜索api为例

---jsonp.js
$.ajax({
    method:"get",
    url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=火车&cb=getData",
    dataType:"jsonp",   //执行的为jsonp请求
    jsonpCallback:"getData",
    success:res=>{
        console.log(res);
    }    
});

---jsonp.html
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--加载jsonp的js代码-->
<script src="./jsonp.js"></script>

浏览器打开html文件
在这里插入图片描述
注：jsonp跨域请求只能处理GET请求

二、CORS跨域资源共享

客户端发送ajax/fetch请求

<script src="../node_modules/axios/dist/axios.js"></script>
<script>
    axios.get("http://127.0.0.1:8001/list")
         .then(res=>{
             console.log(res);
         })
</script>

服务端设置相关的请求头信息（包括设置允许哪些源可以跨域，设置跨域方式等，需要处理options试探性请求）

//Access-Control-Allow-Origin设置允许跨域的源，可以设置为具体地址(一个) 或者 *（所有）
res.header("Access-Control-Allow-Origin",*);  
//或者
res.header("Access-Control-Allow-Origin","http://127.0.0.1:8000");

//设置跨域方式
res.header("Access-Control-Allow-Methods","PUT,POST,GET,HEAD,DELETE,OPTIONS");
......
//处理试探性请求
if(res.method === "OPTIONS"){
   res.send("OK");
   return;
}