vue2使用axios发送post和get请求(含跨域解决

安装axios

百度搜索axios找到axios中文文档,找到安装命令
npm install axios 或者 npm i axios
npm i axiosnpm install axios 的简写,二者没区别

安装axios快捷插件(省去记忆烦恼

插件名:Axios Snippets 作者:Yggdrasill-7C9

在vue中引入axios

import axios from 'axios'

在方法中使用,发送post请求

其他请求参照axios中文文档

 axios
        .post("请求api地址", '请求参数对象')
        .then((res) => {
          console.log("post类型请求返回的数据", res.data);
        })
        .catch((err) => {
          console.error('请求失败信息',err);
        });

完整vue代码

点击查看代码
<template>
  <div id="app">
    <div>
      <button
        @click="requestPost"
        style="height: 50px; line-height: 50px; font-size: 25px"
      >
        点我向 abc.yongheng.work 发起post类型的ajax,请求数据
      </button>
      <span ref="post"></span>
    </div>
    <br />
    <br />
    <br />
    <br />
    <div>
      <button
        @click="requestGet"
        style="height: 50px; line-height: 50px; font-size: 25px"
      >
        点我向 abc.yongheng.work 发起get类型的ajax,请求数据
      </button>
      <span ref="get"></span>
    </div>
  </div>
</template>

<script>
// 安装完axios后,导入axios
import axios from "axios";
export default {
  name: "App",
  components: {},
  methods: {
    requestPost() {
     // axios发起post请求,并携带post参数name
      axios
        .post("/api/Test/index", { name: "anbin" })
        .then((res) => {
          console.log("post类型请求", res.data.data[0]);
          this.$refs.post.innerHTML = JSON.stringify(res.data.data);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    requestGet() {
     // axios发起get请求,不携带参数,此处是get请求简写,完整写法为 axios.get("/index/index/getData")
      axios("/index/index/getData")
        .then((res) => {
          console.log("get类型请求", res.data);
          this.$refs.get.innerHTML = JSON.stringify(res.data);
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>

post方式携参请求

// 获取用户数据列表
export const getUser = (params) => {
    return axios.post(`${url}index`, params);
}

get方式携参请求

// 获取用户数据列表
export const getUser = (params) => {
    return axios.get(`${url}index`, {
        params: { ...params }
    });
}

vue跨域的思路

vue-cli内置了一个服务器,默认端口为8000
当使用vue请求不同域名的后端接口时,会产生跨域报错
要解决该问题,需要借助vue内置的服务器,作为中转站(也可以理解为房租租赁里的中介 / 借力跳板)
因为服务器与服务器之间是不受浏览器跨域限制的,跨域只有触发了浏览器的同源策略才会产生
所以才需要配置下面vue.config.js中的devServer.proxy,以让vue服务器帮我们请求真实的api地址获取资源

跨域解决(一

上述两个方法requestPost和requestGET分别用于发起一个post类型ajax请求和get类型的ajax请求
请求的api地址分别是:

  1. http://abc.yongheng.work/api/Test/index
  2. http://abc.yongheng.work/index/index/getData
    但可以看到axios中只写了剔除域名后的后半段地址,并没有写全
    这是为了解决vue中跨域问题,需要进入到与src同级目录的vue.config.js
    配置vue-cli(vue脚手架)中跨域配置项devServer.proxy,对请求的api分别进行跨域配置

跨域解决(二

进入vue.config.js
第一种简便方式(不推荐使用
直接配置devServer.proxy为要请求的api域名
但这样在vue项目中,不可能只请求一个域名,所以这种方式不推荐

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: 'http://abc.yongheng.work',
  }
})

第二种简便方式(推荐使用
在配置项devServer.proxy中,分别为不同路径进行配置信息,可以对不同路径进行不同的api配置
例如此处/api和/index,分别对以api开头和以index开头的api路径分别进行了配置
api开头路径对应: http://abc.yongheng.work/api/Test/index
index开头路径对应: http://abc.yongheng.work/index/index/getData

  1. target解释:真实请求的域名网址,可以分别对不同的路径进行不同的域名配置,解决了vue项目中多域名接口的问题。
  2. target补充:会自动拼接axios中的请求路径,组成完整的api请求路径,例如此处的http://abc.yongheng.work + 上面的/api/Test/index = http://abc.yongheng.work/api/Test/index
  3. ws解释:是否开启支持ws协议(websocket协议)
  4. changeOrigin解释:是否隐藏真实请求来源,让服务端无法区分真实请求来源
  5. pathRewrite解释:相当于后端的nginx伪静态重写功能,此处^/index的含义是:找到路径中的index将其替换为index,相当于把http://abc.yongheng.work/index/index/getData替换为了http://abc.yongheng.work/index/index/getData(是的,从作用来说没啥用,只是演示一下可以替换请求路径...),
  6. pathRewrite补充:但从另一个角度来说,pathRewrite的作用是:前端可以写假的api地址,例如sss,然后使用pathRewrite改写为真实地址路径,这可以隐藏api的真实地址路径,因为在浏览器中只能看到http://abc.yongheng.work/sss,而不是http://abc.yongheng.work/真实地址路径
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://abc.yongheng.work',
        ws: true,
        changeOrigin: true
      },
      '/index': {
        target: 'http://abc.yongheng.work',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/index': '/index',
        },
      },
    }
  }
})

posted @ 2024-01-02 10:57  Anbin啊  阅读(2737)  评论(0)    收藏  举报