标签：VueCli xxx 请求 配置 代理 代理服务器 changeOrigin localhost

Vue脚手架配置代理

方法一

• 在vue.config.js中添加如下配置：

  devServe: {
      proxy: 'http://localhost:xxxx'
  }
  

• 说明

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

方法二

• 编写vue.config.js配置具体代理规则：

  module.exports = {
      devServe: {
          proxy: {
              '/xxx': { //匹配所有以'/api'开头的请求路径
                  target: 'http://localhost:xxx', //代理目标的基础路径
                  changeOrigin: true,
                  pathRewrite: {'^/xxx': ''} // 把xxx替换为空 只代xxx后面的信息，不写该配置项则匹配的路径也会被发给服务器
                  // 例如：http://localhost:8080/api/student
                  // 代理服务器匹配到/api开头 不带/api而是直接发送后面的信息  目标服务器/student
              }
          }
      }
  }
  /*
   		changeOrigin用于控制请求头的host值
   		假设本机服务器是localhost:8080  代理服务器代理的端口为5000
   		changeOrigin为true时，服务器收到的请求头中的hots为：localhost:5000
   		changeOrigin为false时，服务器收到的请求头中的hots为：localhost:8080
   		changeOrigin默认值为true
   		
  */
  

• 说明

  • 优点：可以配置多个代理，且可以灵活的控制请求是否走代理
  • 缺点：配置策略繁琐，请求资源时必须加前缀
    

标签：VueCli,xxx,请求,配置,代理,代理服务器,changeOrigin,localhost
来源： https://www.cnblogs.com/bingquan1/p/15841150.html

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