Ajax学习（4） Axios+同源和跨域

最新推荐文章于 2024-05-03 21:05:41 发布

GDUF-LZ

最新推荐文章于 2024-05-03 21:05:41 发布

阅读量656

点赞数

分类专栏： Ajax学习文章标签：前端学习 ajax

本文链接：https://blog.csdn.net/weixin_47758346/article/details/124187861

版权

Ajax学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Axios

Axios 是专注于网络数据请求的库。axios 对比原生的 XMLHttpRequest 对象，更简单易用。

axios发起GET请求

axios.get(‘url’, { params: { 参数 } }).then(callback)

<script>
// 请求的 URL 地址
 var url = 'url'
 // 参数对象
 var paramsObj = { name: 'lizhi', age: 20... }
 
 // 调用 axios.get() 发起 GET 请求
axios.get(url, { params: paramsObj }).then(function(res) {
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(res)
 })
</script>

axios发起POST请求

axios.post(‘url’, { 参数 }).then(callback)

<script> 
 //选取id=btn2的按钮
    document.querySelector('#btn2').addEventListener('click', function () {
      var url = 'url'
      var dataObj = { name: 'lizhi', age: 20... }
      axios.post(url, dataObj).then(function (res) {
        console.log(res.data)
      })
    })
</script>

直接使用axios发起请求

//GET请求
   
 axios({
     method: 'GET',
     url: 'url',
     params: { 
         // GET 参数要通过 params 属性提供
         name: 'lizhi',
         age: 20
         ...
     }
 }).then(function(res) {
     console.log(res.data)
 })



//POST请求
   
 axios({
     method: 'POST',
     url: 'url',
     data: { 
         // POST 数据要通过 data 属性提供
         bookname: 'lovemaker',
         price: 666
     }
 }).then(function(res) {
     console.log(res.data)
 })

同源策略和跨域

同源

如果两个页面的协议，域名和端口都相同，那么两个页面具有相同的源。（网址后面没有端口号，默认是80端口）

例如：对比于http://www.lizhi.com/index.html

URL	是否同源	原因
http://www.lizhi.com/other.html	是	协议、域名、端口相同
https://www.lizhi.com/index.html	否	协议不同（http 与 https）
http://lovemaker.com/movie.html	否	域名不同（www.lizhi.com 与 lovemaker.com）
http://www.lizhi.com:3006/home.html	否	端口不同（默认的 80 端口与 3006 端口）
http://www.lizhi.com:80/main.html	是	同源（协议、域名、端口相同）

同源策略

同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。（官方定义：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。）

简单理解：浏览器规定A 网站的 JavaScript，不允许和非同源的网站 C 之间进行资源的交互，例如：无法读取非同源网页的 Cookie、LocalStorage ;无法向非同源地址发送 Ajax 请求等

跨域

概念：
同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域。（根本原因：同源策略不允许非同源的 URL 之间进行资源的交互。）

浏览器对跨域请求的拦截：（图片截自网络）
在这里插入图片描述

（浏览器允许发起跨域请求，但请求回来的数据会被拦截）

实现跨域数据请求

实现跨域数据请求最主要的两种解决方案，分别是 JSONP 和 CORS。

JSONP（早期使用）：兼容性好（兼容低版本IE）但只支持 GET 请求，不支持 POST 请求。
CORS：它符合W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求，但不兼容某些低版本的浏览器。

JSONP

JSONP (JSON with Padding) 是 JSON 的一种“使用模式”,用来解决主流浏览器的跨域数据访问的问题。

受限于浏览器同源策略，网页无法通过 Ajax 请求非同源的接口数据。但

<body>
  <script>
    function abc(data) {
      console.log('拿到数据：')
      console.log(data)
    }
  </script>
//通过<script>请求接口数据，url从网上得到，测试可用
//callback定义回调函数
   <script src="http://www.liulongbin.top:3006/api/jsonp?callback=abc&name=ls&age=30">
    </script>
</body>

jQuery中的JSONP

 $.ajax({ url: 'url',
     //指定datatype为jsonp
    dataType: 'jsonp',
    // 发送到服务端的参数名称，默认值为 callback
    jsonp: 'callback',
    // 自定义回调函数名称，默认值为 jQueryxxx 格式
    jsonpCallback: 'abc',
    success: function(res) {
       console.log(res)
    }
 })
//jQuery实现JSONP，是通过 <script> 标签的 src 属性实现跨域数据访问的，过程是动态创建和移除 <script> 标签的方式，来发起 JSONP 数据请求。