web前端开发项目走proxy代理后端接口,构建发布到生产等环境后,如何修改api接口

这篇具有很好参考价值的文章主要介绍了web前端开发项目走proxy代理后端接口,构建发布到生产等环境后,如何修改api接口。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、开发环境(development)现状

在开发环境,因为本地站点和接口站点不是同一个域名,就产生了跨域问题,但是不可能让后端开发跨域端口或使用jsonp,所以,一般是让前端通过在webpack.config.js中配置proxy来走接口代理。

代码如下:

module.exports = {
  dev: {
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {
      "/api": {
        target: "http://192.168.100.121:31401/webapi", // 研发测试地址
        changeOrigin: true,
        //secure: false, //接受运行在https上的服务
        pathRewrite: {
          "^/api": ""
        }
      }
    },
    host: "localhost", // can be overwritten by process.env.HOST
    port: 8082, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: false,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
  }

这样,就将本地域名代理到接口了。

二、构建后的接口映射或变更(生产环境-production)

构建成dist目录后,就不能修改前端代码了,虽然可以在外面新建一个配置文件来更换接口,但是这种外挂的方式还是不太方便,最好就是dist后可以被打包为docker镜像或者发布到服务器都不需要配置端口。

也就是我们在开发时,就需要考虑这个问题,将端口地址设置好,而不是事后修改。

而且构建后端口就不会走代理访问了,是直连,意味着不存在跨域问题。

所以在前端接口中,应该是写相对路径。

三、如何实现开发和生产版本的接口地址变更

其实也容易,通过if语句判断当前环境,然后启用不同的端口地址即可。

关键代码如下:

1、在main.js中判断环境

if (process.env.NODE_ENV == "development") {
  //开发环境
  Vue.prototype.$baseUrl = process.env.baseUrl + process.env.BASE_API;
  //以上两个变量的值
} else {
  //生产环境
  Vue.prototype.$baseUrl = process.env.BASE_API;
}

其中以上process.env.baseUrlprocess.env.BASE_API这两个环境变量的值,是在config/prod.env.jsconfig/dev.env.js中配置的,这两个环境的配置文件最终会合并到config\index.js来。

2、dev.env.js的配置代码

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API:'"/api"',
  baseUrl:'"http://'+config.dev.host+':'+ config.dev.port +'"'
})

3、prod.env.js的配置代码

module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"/webapi"',
}

其中config.dev.host的值是localhostconfig.dev.port的值是8082,他们是在开头的webpack.config.js配置的。

所以,main.js中的if语句的环境变量的值就是来自于这里,很明显的看到在生产环境中,是没有配置域名,只是配置了相对路径,这样在构建后,他们没有跨域,自然就能正常访问后端接口。

这样就实现了题目所表示的不同环境用不同后端接口的问题。

如果你对web前端开发、面试感兴趣的话可以加V:imqdcnn。群里有各种学习资源发放,免费答疑,更有行业深潜多年的技术牛人分析讲解。

祝你能成为一名优秀的WEB前端开发工程师!文章来源地址https://www.toymoban.com/news/detail-616344.html

到了这里,关于web前端开发项目走proxy代理后端接口,构建发布到生产等环境后,如何修改api接口的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Web前端 ---- 【Vue3】Proxy响应式原理

    目录 前言 安装Vue3项目 安装 Proxy 语法格式 从本文开始进入vue3的学习。本文介绍vue3中的响应式原理,相较于vue2中通过object.defineProperty(vue2中的响应式)来实现响应式,vue3中换成了Proxy来进行实现。 相较于vue2通过vue-cli脚手架来创建项目,这里更推荐使用create-vue来创建vue3的

    2024年01月16日
    浏览(68)
  • umi 如何使用 proxy 代理解决 开发环境跨域 问题

    由于浏览器的同源策略限制,当一个请求 URL 的协议、域名、端口和当前页面 URL 任意一个不一致时都会出现跨域错误。 eg: 用 node run了一个 http://localhost:8080 的服务,在这个服务器下访问的网页也默认在 http://localhost:8080 这个域下面; 假设服务端所在的域是 http://example.com 这

    2024年02月09日
    浏览(39)
  • smiley-http-proxy-servlet 实现springboot 接口反向代理,站点代理,项目鉴权,安全的引入第三方项目服务

    2023-11-15 SmileSayBoot 开源,项目内扩展 实现了动态代理,可代理API接口/站点,若对你有用,请点个☆star 谢谢,能力有限,不喜勿喷。 背景: 项目初期 和硬件集成,实现了些功能服务,由于是局域网环境,安全问题当时都可以最小化无视。随着对接的服务越来越多,部分功能

    2024年02月12日
    浏览(50)
  • [Java Web]element | 一个由饿了么公司开发的前端框架,让你快速构建现代化、美观的 Web 应用程序。

    ⭐作者介绍:大二本科网络工程专业在读,持续学习Java,努力输出优质文章 ⭐作者主页:@逐梦苍穹 ⭐所属专栏:Java Web ⭐如果觉得文章写的不错,欢迎点个关注一键三连😉有写的不好的地方也欢迎指正,一同进步😁 https://element.eleme.cn/#/zh-CN/component/installation   Element 是

    2024年02月05日
    浏览(92)
  • 已配置vue.config.js中的proxy代理,前端本地环境仍然请求后端出现跨域报错

    已配置vue.config.js中的proxy代理,前端本地环境仍然请求后端出现跨域报错 已配置vue.config.js中的proxy代理,前端本地环境仍然请求后端出现跨域报错 控制台仍然出现cors禁止报错,接口调不通 配置proxy代理解决跨域问题的原理是: 前端工程本地环境会启动一个 express 或 koa 的

    2024年02月01日
    浏览(56)
  • vue2项目导出操作实现(后端接口导出、前端直接做导出)

    实现效果:导出列表数据 导出的内容: 后台相对来说比较简单一点,只要后端配合写接口即可 代码:放在导出事件里进行调整即可完成导出效果 效果如上:个人认为调接口导出的表格更美观一点 操作如下: 首先安装我们需要的xlxs库: 接着在我们项目文件夹/src/assets/js创建

    2024年04月11日
    浏览(44)
  • .NET Core(C#)使用Titanium.Web.Proxy实现Http(s)代理服务器监控HTTP请求

    关于Titanium.Web.Proxy详细信息可以去这里仔细看看,这里只记录简单用法 NuGet直接获取Titanium.Web.Proxy 配置 与其说是配置,不如就说这一部分就是未来你需要使用的部分,想知道具体每个部分是干什么的就去看原文链接 全放过来太占地方 最后的 Console.Read(); 是一个等待函数,你

    2024年02月09日
    浏览(53)
  • vue项目跨域问题(图片跨域)devServer.proxy代理失效时,nginx反向代理解决跨域问题

    ​ 本篇文章主要记录个人在公司项目开发中所遇问题,主要内容:在vue项目的开发中图片所存的服务器/端口号和项目所在的服务器/端口号不同,出现了跨域问题的保错。 ​ 如果文章有歧义,请各位大佬指出,避免误导更多的人!! Bug起因 ​ 在vue项目的开发中图片所存的

    2024年02月15日
    浏览(44)
  • 基础前端使用web3 进行区块链项目开发

    这篇文章不会些区块链的机制算法等一切,只是对前端开发者,如何快速上手进行区块链项目开发做一个简单的引导。 阅读本文之前,需要了解一些简单的区块链知识,能回答以下四个问题就可以阅读本文了。 1、区块链是什么? 2、区块链节点是什么? 3、钱包是什么? 4、

    2024年02月01日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包