标签：devServer axios 请求 代理 js Vue 脚手架 localhost

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

实现方式

方式一

在vue.config.js中添加devServer:{}

module.exports = {
    pages:{
        index:{
            //入口
            entry: 'src/main.js'
        },
    },
    lintOnSave:false,  //关闭语法检查
     devServer:{
         proxy:'http://localhost:5000'
     },

组件使用axios获取数据

<script>
import axios from 'axios'
export default {
  name: "Student",
  methods:{
    getInfo(){
      axios.get("http://localhost:8080/student").then(
          response => {
            alert(response.data);
          },
          error => {
            alert("请求失败");
          }
      )

    }
  }
}
</script>

优点：配置简单，请求资源时直接发给前端（8080）即可。
缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
工作方式：若按照上述配置代理，当请求了前端不存在的资源是（public目录下的资源）,那么该请求才会转发给服务器（优先匹配前端资源）。

方式二

配置vue.config.js

module.exports = {
    pages:{
        index:{
            //入口
            entry: 'src/main.js'
        },
    },
    lintOnSave:false,  //关闭语法检查
    devServer:{
        proxy:{
            '/hzc':{ //匹配所有以 '/hzc' 开头的请求路径
                target:'http://localhost:5000', //代理目标的基础路径
                pathRewrite:{'^/hzc':''},
                ws:true, //用于支持websocket
                changeOrigin:true //用于控制请求头中的host值，默认值为true
            }
        }
    }
}

优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
缺点：配置略微繁琐，请求资源时必须加前缀。axios.get("http://localhost:8080/student").then(）

标签：devServer,axios,请求,代理,js,Vue,脚手架,localhost
来源： https://www.cnblogs.com/IamHzc/p/15405715.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。