Ajax----跨域请求 axios

最新推荐文章于 2024-04-28 04:09:01 发布

m0_56381561

最新推荐文章于 2024-04-28 04:09:01 发布

阅读量368

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/m0_56381561/article/details/126369463

版权

跨域请求：两个不同域名之间的通讯。

Ajax受到浏览器的限制（安全性考虑）不允许跨域通信。

<script>
var req=new XMLHttpRequest();
req.open('get','http://phpmyadmin.com/test/home.js');   //报错
req.send();
</script>

默认情况下浏览器采用同源策略：一个域下面的JS只能请求同一个域下面的文档内容，不能跨域请求。

解决方法一：src属性

使用标签的src属性，src属性是没有同源的限制的

<img src='http://www.baidu.com/tu1.jpg' />
<script src='http://phpmyadmin.com/test/home.js'></script>

解决方法二：PHP代理

A客户端

<script>
var req=new XMLHttpRequest();
req.open('post','./6-demo.php');
req.onreadystatechange=function(){
	if(req.readyState==4 && req.status==200){
		alert(req.responseText);
	}
}
req.send();
</script>

A服务器

<?php
echo file_get_contents('http://phpmyadmin.com/test/test.php');

B服务器

<?php
echo '锄禾日当午';

小结：客户端有同源策略，服务器没有同源策略，我们可以使用服务器作为代理去跨域请求。

解决方法三：jsonp

jsonp=json+动态script。是一种非官方协议，为了解决JS的跨域请求

通过 <script> 的src属性引入跨域文件从而携带数据实现了数据的跨域访问。

注意：

1、通过动态的添加script的src属性

2、传递的函数名和客户端定义的函数名要一致

3、跨域的服务器返回的是调用函数的形式

axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios基本使用</title>
</head>
<body>
    <button id="btn1">发送get请求</button> <br><br>
    <button id="btn2">发送post请求</button><br><br>
    <button id="btn3">发送put请求</button><br><br>
    <button id="btn4">发送delete请求</button>

    <hr>

    <div>其他发送请求的api:</div><br><br>
    <button id="btn5">发送get请求1</button> <br><br>
    <button id="btn6">发送post请求1</button><br><br>
    <button id="btn7">发送put请求1</button><br><br>
    <button id="btn8">发送delete请求1</button>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    //发送get
    document.getElementById("btn1").onclick = function(){
       axios({
        method:"GET",
        url:"http://localhost:3000/posts/1"
       }).then(response=>{
           console.log(response);
       })
    };

    //发送post
    document.getElementById("btn2").onclick = function(){
       axios({
        method:"POST",
        url:"http://localhost:3000/posts",
        data:{
            title:"axios学习",
            author:"Yehaocong"
        }
       }).then(response=>{
           console.log(response);
       })
    };
    //发送put
    document.getElementById("btn3").onclick = function(){
       axios({
        method:"PUT",
        url:"http://localhost:3000/posts/2",
        data:{
            title:"axios学习",
            author:"Liaoxiaoyan"
        }
       }).then(response=>{
           console.log(response);
       })
    };
    document.getElementById("btn4").onclick = function(){
       axios({
        method:"DELETE",
        url:"http://localhost:3000/posts/2",
       }).then(response=>{
           console.log(response);
       })
    };



    //其他发送请求的api

    
    document.getElementById("btn5").onclick = function(){
        //发送get,使用get，第一个参数时url，第二个参数时config配置对象
       axios.get("http://localhost:3000/posts/1")
       .then(response=>{
           console.log(response);
       })
    };

    //发送post
    document.getElementById("btn6").onclick = function(){
        //发送post请求，第一个参数时url，第二个参数时请求体，第三个参数时config配置对象
        axios.post("http://localhost:3000/posts",
        {title:"axios学习2",
            author:"Yehaocong2"})
            .then(response=>{
           console.log(response);
       })
    };
    //发送put,
    document.getElementById("btn7").onclick = function(){
        //发送put,接收三个参数，url  请求体 、 config配置对象
       axios.put("http://localhost:3000/posts/2",{title:"axios学习",
            author:"Liaoxiaoyan"})
       .then(response=>{
           console.log(response);
       })
    };
    document.getElementById("btn8").onclick = function(){
        //发送delete请求，接收2个参数， url config配置对象
        axios.delete("http://localhost:3000/posts/3")
       .then(response=>{
           console.log(response);
       })
    };

    //这个与axios({})基本相同
    // axios.request({

    // })
</script>
</html>