Vue 配置代理与跨域

品味猫Likecat

于 2019-11-17 21:09:39 发布

阅读量145

点赞数

分类专栏： Vue家族文章标签： Vue

本文链接：https://blog.youkuaiyun.com/EACMe1107/article/details/103113036

版权

Vue家族专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在项目中设置跨域代理，通过在config目录下创建proxyConfig.js文件并修改index.js来实现。同时，展示了在src/api目录下创建data.js文件，使用axios进行API数据获取的方法。最后，详细解释了在需要交互数据的网页中添加代码的具体步骤。

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

1.在config目录下新建proxyConfig.js

module.exports = {
  proxy: {
    '/api': {
      target: 'http://aaaa/',
      changeOrigin: true,
      timeout: 300000,
      proxyTimeout: 300000,
    }
  }
}

2.将index.js 添加code

var proxyConfig = require('./proxyConfig')

module.exports = {
    dev: {
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: proxyConfig.proxy //添加此处code
    }
}

3.在src目录下新建api文件，新建data.js

import axios from 'axios';

export function getData() {
  const url = '/api/demo'
  const data = {}

  return axios.get(url, {
    params: data
  }).then((res) => {
    return Promise.resolve(res.data)
  })
}

4.在需要交互数据网页添加代码

import { getData } from '../api/data'

created() {
    this.getdata()
  },
  created() {
    this.getfpmsDataNew()
  },
  methods: {
    getfpmsDataNew() {
      getData().then(res => {
        this.fpmsData = res.Data 
      })
    }
}

大功告成！有什么错误欢迎大家留言指出