export http_proxy 实时生效

时间: 2023-02-12 17:12:46 浏览: 108

解决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: { 在Vue.js开发过程中，我们经常会遇到前后端分离的情况，此时前端和后端的开发环境可能在不同的IP和端口上。Vue CLI创建的项目默认运行在`localhost:8080`，但后端API接口可能分布在多个IP和端口上，这就会导致跨域问题。为了解决这个问题，我们可以利用Vue CLI的配置文件`vue.config.js`中的`devServer.proxy`选项来设置代理。打开`vue.config.js`文件，如果没有这个文件，可以在项目的根目录下创建它。然后添加以下配置： ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', devServer: { open: true, proxy: { '/api1': { target: 'http://192.168.10.22:8081', changeOrigin: true, // 允许跨域 pathRewrite: { '^/api1': '', // 将/api1前缀重写为空 }, ws: false, // 是否启用websockets }, '/api2': { target: 'http://192.168.10.30:9999', changeOrigin: true, pathRewrite: { '^/api2': '', // 将/api2前缀重写为空 }, ws: false, }, }, }, }; ``` 在这个例子中，我们设置了两个代理规则：'/api1' 和 '/api2'，分别对应不同的后端服务。当你在前端发起如`/api1/some-endpoint`或`/api2/another-endpoint`的请求时，Vue CLI的开发服务器会自动将这些请求转发到对应的后端服务器，从而解决跨域问题。然而，如果项目中有多个模块，每个模块请求的IP和端口都不同，那么保持`vue.config.js`中的代理配置可配置化就显得很重要。这里有两个思路： **思路一**：尝试在`public`目录下创建一个JSON文件，存储所有的接口地址配置，然后在Vue组件中读取这个JSON文件。但这种方法可能会遇到静态资源路径解析的问题，导致JSON文件无法正确加载。 **思路二**：在`public`目录下创建一个JS文件，将所有接口地址挂在`window`对象上，然后在HTML的`index.html`文件中引入这个JS文件。这样，后端开发者可以修改这个JS文件中的URL，而不会影响前端的打包。例如：在`public/js/apiConfig.js`中： ```javascript window.serverUrls = { publicSentiment: 'http://192.168.10.22:8081', monitor: 'http://192.168.70.6:9999', }; ``` 在`public/index.html`中： ```html <script src="./js/apiConfig.js"></script> ``` 然后在Vue组件中使用这些URL： ```javascript export const getDictionary = (params) => { return _axios({ url: `${window.serverUrls.monitor}/keypersonnel/getDictionaryForType`, method: 'post', data: params, }); }; ``` 这种方式可以让前端代码与具体的接口地址解耦，后端只需要更新`apiConfig.js`文件，无需频繁地重新打包前端应用。需要注意的是，以上代理配置仅在开发环境中生效。当项目部署到生产环境时，需要确保服务器配置了CORS（跨源资源共享）或者通过反向代理服务器将API请求转发到正确的后端服务。对于生产环境，通常不会存在跨域问题，因为前端和后端通常部署在同一域名下。如果仍有跨域问题，需要咨询后端团队，调整服务器配置。总结来说，解决Vue项目中跨域问题的关键在于理解并正确使用`devServer.proxy`配置，以及在项目结构中设计灵活的接口地址管理策略。通过这些方法，你可以轻松应对多后端服务的开发需求，同时减少因接口变动带来的不必要的开发工作。

使用 "export http_proxy=http://proxy-server:port" 命令设置 http 代理服务器时，设置立即生效。你可以在当前终端会话中使用该代理服务器连接。如果你需要永久设置，你可以将该命令添加到 ~/.bashrc 或 ~/.bash_profile 文件中。

阅读全文

export http_proxy 实时生效

相关推荐

Centos7虚拟机配置代理

通过GOPROXY代理来解决无法安装Go插件和依赖的问题

运行中deno程序，修改 export http_proxy 不生效

export http_proxy='http://ip:port'

export http_proxy=http://10.16.150.231:8099 怎么设置

export no_proxy="172.23.128.0/24" 不生效

no_proxy: 172.28.0.1,${no_proxy:-} 这个怎么设置

linux 设置 https_proxy

centos7 web Proxy

linux修改network proxy

Java后端如何设置proxy

嵌入式Linux的proxy怎么测试

go语言更改proxy永久 macos

linux设置http代理

Linux如何使用http代理

基于Java的家庭理财系统设计与开发-金融管理-家庭财产管理-实用性强

弹性盒子Flexbox布局.docx

网络财务系统 SSM毕业设计 附带论文.zip

最新推荐

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

基于Java的家庭理财系统设计与开发-金融管理-家庭财产管理-实用性强

构建基于Django和Stripe的SaaS应用教程

管理建模和仿真的文件

R语言数据处理与GoogleVIS集成：一步步教你绘图

如何使用Matlab实现PSO优化SVM进行多输出回归预测？请提供基本流程和关键步骤。

Symfony2框架打造的RESTful问答系统icare-server

"互动学习：行动中的多样性与论文攻读经历"

R语言与GoogleVIS包：打造数据可视化高级图表

在三级客户支持体系中，服务台工程师是如何处理日常问题并与其他层次协作以确保IT服务质量和连续性的？

网络财务系统 SSM毕业设计附带论文.zip