Vue+axios状态返回200，但是没有数据，提示Access-Control-Allow-Origin的问题

最新推荐文章于 2025-06-06 19:23:52 发布

WuxiaoyanR

最新推荐文章于 2025-06-06 19:23:52 发布

阅读量7.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端杂烩文章标签： Vue+axios

本文链接：https://blog.youkuaiyun.com/qq_37881606/article/details/95450508

前端杂烩专栏收录该内容

23 篇文章

订阅专栏

该博客介绍了Vue使用axios封装接口的步骤。准备工作包括安装axios，在src文件夹下创建util文件夹并新建api.js。代码部分，先在config文件夹的index.js中配置proxyTable内容，接着在api.js中封装接口，最后在页面调用接口，测试通过。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

准备工作

1、安装axios
2、在src文件夹建一个util的文件夹，文件夹下新建api.js

代码

第一步：在config文件夹下的index.js中找到dev，在dev中配置proxyTable内容

proxyTable: {
      '/api': {
        target: '接口域名，http://*******',
        changeOrigin: true,
        pathRewrite: {'^/api': ''}
      }
    }

第二步：api.js中封装好接口

import axios from 'axios'

var qs = require('qs')
var instance = axios.create({
  headers: {
    'content-type': 'application/x-www-from-urlencoded'
  }
})

export const ArtcaList = params => {
  return instance.post('/api' + '/apiList/3', qs.stringify(params)).then(res => res.data)
}

第三步：页面调用接口

import {ArtcaList} from '../util/api.js'
export default{
  name: 'ProductList',
  data () {
    return {}
  },
  created () {
    this.getArtcaList()
  },
  methods: {
    getArtcaList () {
      ArtcaList().then(result => {
        console.log(result)
        if (result.code === 0) {
          return false
        }
        if (result.length > 0) {
          console.log(result.data)
        }
      })
    }
  }
}

OK，测试通过，完