vue中使用axios通过配置proxy实现跨域

JellyDDD

已于 2022-04-20 10:34:46 修改

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue proxy javascript

于 2020-10-12 19:04:23 首次发布

本文链接：https://blog.youkuaiyun.com/CSND7997/article/details/109034250

本文介绍了一个使用Vue进行跨域请求的实际案例。通过配置代理，实现了本地开发环境下对远程API的有效调用。具体展示了如何设置vue.config.js文件来达到跨域目的，并在组件中发起GET请求获取数据。

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

请求地址
http://www.xxx.cn/api/queryMsg.php

main.js

import axios from 'axios'
Vue.prototype.axios = axios;
axios.defaults.baseURL = '/api'

vue.config.js

module.exports = {
    devServer: {
      host: 'localhost',
      port: 8080,
      proxy: {
        '/api': {
          target:'http://www.xxx.cn/api',  // 
          changeOrigin: true,
          pathRewrite:{ 
            '^/api': ''  
          }  
        }
      }
    }
}

work.vue

this.axios.get("/queryMsg.php")
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })