Vue后台管理里系统项目前端解决跨域问题

  1. 首先找到项目目录下的config文件夹,找到index.js,覆盖以下代码
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      // 这里可以配置代理
      '/gdapi': {
        target: 'http://132.119.126.92:13220',
        changeOrigin: true,
        pathRewrite: {
          '^/gdapi': '/'
        }
      },
      '/api': {
        target: 'http://132.119.126.92:13221',
        changeOrigin: true,
        pathRewrite: {
            

2.在src文件夹下新建api文件夹用于存放请求方法

import axios from 'axios'

// 设置基准地址
// axios.defaults.baseURL = 'http://132.119.126.92:13220'
// 获取工单列表
export const getGdList = obj => axios.get('/gdapi/gdwx/activejob/getJobs', {params: obj}).then(res => res.data)

3.在需要获取数据的页面中引入

import {getGdList, getGdStatus, getGdMarket} from '@/api'

4.数据渲染

    // 获取工单列表的方法
    initList () {
      this.loading = true
      getGdList({
        page: this.currentPage,
        size: this.pagesize
      })
        .then(res => {
          console.log(res)
          this.gdList = res.result.row
          this.total = res.result.totalsize
          setTimeout(() => {
            this.loading = false // 获取完数据之后,让加载动画消失
          }, 300)
        })
    },

你可能感兴趣的:(vue,总结)