axios+跨域-笔记

最新推荐文章于 2024-08-02 00:06:36 发布

Youser511

最新推荐文章于 2024-08-02 00:06:36 发布

阅读量301

点赞数

分类专栏：学习文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_45025670/article/details/126107752

版权

本文介绍了axios网络请求库的使用，包括GET和POST请求，并详细阐述了同源策略及其原因。接着探讨了跨域问题，讲解了JSONP和CORS两种解决跨域的方法，其中JSONP适用于低版本浏览器，而CORS是现代浏览器的跨域标准解决方案。

摘要由CSDN通过智能技术生成

axios

http://www.axios-js.com/

Axios是专注于网络数据请求的库

相比于原生的XMLHttpRequest 对象，axios简单易用

相比于jQuery ，axios更加轻量化，只专注于网络请求

axios发起GET请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios发起POST请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

直接使用axios发起请求

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

例子：

document.querySelector("#btn1").addEventListener('click',function(){
   
    var url = 'http://www.liulongbin.top:3006/api/get';
    var paramsObj = {
   name: "zs" , age: 12