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

原创已于 2022-04-20 10:34:46 修改 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #proxy #javascript

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

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

请求地址
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)
        })