【vue学习】vue axios

最新推荐文章于 2024-06-24 22:11:25 发布

Swingzzz

最新推荐文章于 2024-06-24 22:11:25 发布

阅读量117

点赞数

分类专栏： Vue学习文章标签： vue ajax

本文链接：https://blog.csdn.net/weixin_41908867/article/details/109727540

版权

Vue学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中安装和使用axios库来发送GET和POST请求。通过在main.js中引入并配置axios，实现了与后端API的数据交互。同时，针对跨域问题，提供了Spring MVC中的CORS配置示例，确保前端可以成功访问远程API。

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

【vue学习】vue axios

安装vue axios

npm install --save axios vue-axios

安装依赖

npm install

在main.js中引入

在项目中使用axios模块

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios)

发送请求

发送get请求

    registfn: function () {
      // GET request for remote image in node.js
      this.axios({
        method: "get",
        url:
          "http://localhost:8089/regist?mail=" +
          this.mail +
          "&password=" +
          this.password,
      }).then(function (response) {
        console.log(response.data);
      });

发送post请求

axios(config)
// Send a POST request
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

解决跨域问题

<!-- spring-mvc里的内容-->
<!-- 解决API接口跨域问题配置 Spring MVC 版本必须是 4.2 及以上 -->
<mvc:cors>
    <mvc:mapping path="/**"
                 allowed-origins="*"
                 allowed-methods="POST, GET, OPTIONS, DELETE, PUT"
                 allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
                 allow-credentials="true"
                 max-age="3600" />
</mvc:cors>