vue 项目中axios的使用以及封装跨域的配置

最新推荐文章于 2024-09-21 16:53:24 发布

原创最新推荐文章于 2024-09-21 16:53:24 发布 · 595 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

该博客介绍了Vue项目中接口配置与跨域设置的方法。首先新建request.js文件创建axios实例并配置基础路径，接着在src/api/index.js中定义请求方法并配置具体请求，然后在页面中按序导入并使用接口，最后通过在与src同级目录新建vue.config.js文件进行跨域设置。

1.新建request.js文件（我放于util目录下），里面引入axios,创建axios实例，在实例里面作基础路径的配置，暴露出axios实例对象

import axios from 'axios'
const request = axios.create({
  baseURL: 'api/', // 基础路径
  withCredentials: true // 表示请求可以携带cookie
})
export default request

2.配置具体的请求接口。

新建目录 src/api/index.js 在index.js中定义每一个请求的方法

引入request文件，配置每个请求，注意get请求携带参数时参数在params对象中

import request from '../util/request'
export const getTagList = (params) => {
  return request({
    method: 'GET',
    url: 'shop/1/tag',
    params
  })
}
// 新增tag
/**
  * 参数： name:标签名字
  *        category:
  *        type:1
*/
export const creatTagAdd = data => {
  return request({
    method: 'POST',
    url: 'shop/1/tag',
    data: data
  })
}

3.在页面中使用接口

按序导入接口方法，并使用

import { getGroupPacketById, getGroupPacket } from '../api/index'

async getTagDefined () {
      const params = { type: 1 }
      const data = await getTagList(params)

async addTagg () {
      const arr = { name: this.addTag, type: 1 }
      creatTag(arr)

4.跨域的设置

在与src同级的目录中新建vue.config.js文件

module.exports = {
  // local Laravel server address for api proxy
  devServer: {
    proxy: {
      '/api': {
        target: 'http://106.14.175.81', // 接口的域名
        changeOrigin: true, // 是否改变请求的host
      }
    }
  },