当前位置: 首页 > 编程笔记 >

解决vue中使用proxy配置不同端口和ip接口问题

柳宾实
2023-03-14
本文向大家介绍解决vue中使用proxy配置不同端口和ip接口问题,包括了解决vue中使用proxy配置不同端口和ip接口问题的使用技巧和注意事项,需要的朋友参考一下

问题描述:

  使用vue-cli创建的项目,开发地址是localhost:8080,由于后台开发不同的模块,导致每个模块请求的ip和端口号不一致

  例如:http://192.168.10.22:8081  或者 http://192.168.10.30:9999等

解决问题:

  在vue.config.js中配置不同的端口号

  module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  devServer: {
    open: true,
    proxy: {
      '/monitor': {                          // 配置的变量
        target: 'http://192.168.10.30:9999',          // 需要请求的第三方接口
        changeOrigin: true,                    // 开启代理:
                                           

在本地会创建一个虚拟服务器,然后发送请求,并同时接收请求,这样服务端和服务端进行交互就不会有跨域问题

        pathRewrite: {                       // 这里重写路径,如果monitor本身不存在接口路径中,一定要写成空!!!
          '^/monitor': ''
        },
        ws: false
      }
    }
  }
}

在调用该接口的时候,需要写上'/monitor/'

export const getDictionary = ((params) => {
  return _axios({
    url: '/monitor/keypersonnel/getDictionaryForType',
    method: 'post',
    data: params
  })
})

备注:proxy代理只在本地测试的开发环境有效,在部署到线上的时候应该怎么区分呢

问题:

  若项目中不同模块请求不同ip和端口的接口,应该怎么设为可配置的呢,后端可以修改的,避免由于接口问题导致的不断的打包上线

   思路一:在public目录下放置json文件,配置的时候,去读取json文件

<template>
 <div class="er">
  <el-scrollbar style="height:100%">
   <div class="ds">
    <img
     class="sdde"
     :src='`${publicPath}imges/but_play.png`'
    >
   </div>
  </el-scrollbar>
 </div>
</template>
<script>
export default {
 data() {
  return {
   publicPath: process.env.BASE_URL
  }
 },
 components: {
 }
}
</script>

  结果: 失败!给图片的src赋值成功,但是在create中按照同样的方法去require这个json文件,还是报路径错误

  思路二: 在public中新建js文件,在js文件中,将地址挂载到window上,并在index的html文件中引入

// 配置线上的请求地址
window.serverUrl = {
  publicSentiment: 'http://192.168.10.22:8081',            // 舆情分析
  monitor: 'http://192.168.70.6:9999'                 // 重点人员监控
} 

总结

以上所述是小编给大家介绍的解决vue中使用proxy配置不同端口和ip接口问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

 类似资料:
  • 让我们假设一个后端应用程序,它公开了一些Rest API,运行在地址192.168.1.10:8889的Jetty网络服务器上。 我希望有一个前端应用程序(仅限于html/javascript,在apache2 Web服务器上)在相同的IP上运行,但在不同的端口(例如8000)上运行,它应该使用后端应用程序公开的API。 我怎样才能让这个架构工作而不进入“No'Access-Control-All

  • 如图,这是我项目在 vite.config 的 server 配置。 问题1:为什么配置这样一段代码就解决跨域问题了呢? 问题2:服务器和服务器之间的请求有没有跨域这样的存在呢?(我了解到的是跨域是浏览器的限制,是我理解错了吗) (请大家把我当成一个网络小白,但不是特别小白 >.<)

  • 本文向大家介绍vue cli3 配置proxy代理无效的解决,包括了vue cli3 配置proxy代理无效的解决的使用技巧和注意事项,需要的朋友参考一下 vue cli3 创建的vue项目配置开发环境代理无效,网上的各种配置都试了,还是不行,最后终于试出来一种配置方法 vue.config.js配置如下内容(不要配置任何多余的选项,什么changOrigin pathRewrite 之类的东西都

  • 我有docker容器用于实验。所以我不知道以后尝试新应用时会使用哪些端口。在docker-run命令中使用ip/port从主机访问docker容器应用程序而不公开它,这是不可能的吗?

  • 本文向大家介绍解决vue中使用Axios调用接口时出现的ie数据处理问题,包括了解决vue中使用Axios调用接口时出现的ie数据处理问题的使用技巧和注意事项,需要的朋友参考一下 1.问题 近期在使用vue2 + axios 调用接口时碰到一个IE中很奇葩的问题,让我头痛了很久。 废话不多扯,就是在其他浏览器中调用接口返回数据然后可以很顺利的进行处理,但在IE(9-11)中发现发送请求是成功的而且

  • 本文向大家介绍vue项目中使用lib-flexible解决移动端适配的问题解决,包括了vue项目中使用lib-flexible解决移动端适配的问题解决的使用技巧和注意事项,需要的朋友参考一下 第一部分:项目中引入lib-flexible 一、项目中安装lib-flexible 二、在项目的入口js文件中引入lib-flexible 通过要以上两步,就完成了在vue项目使用lib-flexible来