webpack配置接口地址代理

最新推荐文章于 2024-05-14 10:33:17 发布
最新推荐文章于 2024-05-14 10:33:17 发布
阅读量1.1k 收藏 2
点赞数 1
分类专栏： javascript vue.js 文章标签： javascript vue.js webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jeo_blue/article/details/113847727
版权

前言

在实际项目中，本地开发环境请求服务器接口地址的时候，会存在跨域问题，解决跨域问题，可以关闭浏览器跨域限制，或者使用webpack-dev-server的proxy代理

第一种方式，前面有文章介绍过：各浏览器开启跨域模式
现在说明第二种方式：

1、在webpack.config.js中配置

devServer: {
   
    ...
    proxy: {
   
      '/service-core': {
   
         target: 'https://test.******.org'
最低0.47元/天 解锁文章
zyf1910
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VueJs 将接口用webpack代理到本地的方法
11-27
上一篇博文，我们已经顺利的从cnodejs.org请求到了数据，但是大家可以注意到我们的/src/api/index.js的第一句就是： // 配置API接口地址 var root = 'https://cnodejs.org/api/v1' 这里我们的接口地址是写死的，这固然是一个问题，但是其实并不是最重要的，而是在cnodejs.org已经帮我们把接口处理的很好了，帮我们解决了跨域问题。而在实际开发中，很多项目接口是不允许我们跨域请求的。 而在第一章说到的前后端分离开发模式，前端开发前端，同时后端也在开发接口，那这个时候我们前端工程师不可能到服务器上直接开发，或者在本地搞一套服务器环境
webpack+vue-cil 中proxyTable配置接口地址代理操作
10-15
在开发Web应用时，尤其是基于Vue.js的项目，我们经常使用`webpack`作为模块打包工具，结合`vue-cli`作为脚手架...同时，根据实际接口路径和需求，灵活调整`proxyTable`配置，可以更好地满足各种场景下的接口代理需求。
webpack.config.js 中配置代理
百晓子木
06-30 6030
【CV】Webpack5 配置跨域代理、WebSocket代理:ws
最新发布
Xpy 的博客
05-14 274
Webpack 一般的代理配置。项目中用到了 WebSocket、与服务端对接时，需要联调代理。
Webpack配置
nanxun201314的博客
03-15 2760
Loader本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。因为 Webpack 只认识 JavaScript，所以 Loader 就成了翻译官，对其他类型的资源进行转译的预处理工作。Plugin就是插件，基于事件流框架Tapable，插件可以扩展 Webpack 的功能，在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
webpack.config.js基本配置
qq_70005642的博客
10-25 1240
webpack.config.js的基本配置
Vue学习四：webpack打包（指定环境接口访问Ip）
Cx的博客
04-21 1563
webpack打包指定环境ip，区分生产环境、测试环境和开发环境的配置
vue 项目使用 webpack 构建自动获取电脑ip地址
拿回忆下酒
01-25 1105
前端常用webpack构建项目，但是默认情况下都是 http://localhost:8080 ，那么如何使用电脑的ip地址自动构建呢？ 引入address cnpm i address --save-dev vue.config.js 使用 const address = require('address'); const localhost = address.ip() || 'localhost'; module.exports = { ... devServer: { open: pro
webpack动态配置反向代理.zip
05-14
接下来，`vue.config.js`是Vue CLI项目的配置文件，它允许我们自定义Webpack配置。在这里，我们可以引入`proxy.config.js`并将其设置为开发服务器的代理： ```javascript const proxyConfig = require('./proxy....
解决vue+webpack项目接口跨域出现的问题
10-14
通过上述配置，Vue+Webpack项目中的接口跨域问题和打包后的404问题基本可以得到解决。记得在生产环境中，还需要在服务器端设置CORS（Cross-Origin Resource Sharing）策略，以允许来自不同源的请求。对于开发环境，`...
webpack联邦模块之remotes方法
letterTiger的博客
04-10 2031
使用联邦模块后当前项目就会有两个依赖，一个是依赖共享模块，一个是依赖远程模块。运行时webpack/runtime/consumes用于解析共享模块，运行时webpack/runtime/remotes 用于解析远程模块。这两个模块对应的方法分别是__webpack_require__.f.consumes ****和__webpack_require__.f.remotes，是的这两个方法都是关在__webpack_require__.f上的，和上一篇文章中的__webpack_require__.f.j
webpack（六）搭建本地服务器及代理配置
Yushia的博客
04-09 4558
webpack提供了一个可选的本地开发服务器，基于node.js搭建，内部使用express框架，让浏览器自动刷新修改后的结果。
webpack地址代理
fk129
11-28 684
项目开发阶段前后端分离模式，这就涉及到了开发地址和部署地址不一样，如果前端把地址写死的话，那样每次部署都要修改地址，这样可能会导致有时候修改遗漏等问题 那么考虑下，我们在开发阶段是不是可以通过地址代理来解决前端地址写死的问题 vue2.0的webpack提供了这个功能 比如一个完整的请求地址是 http://172.31.4.247/sc1902/login/oauth/token webpac...
webpack之proxyTable设置跨域
weixin_33751566的博客
05-03 635
为什么要使用proxyTable 很简单，两个字，跨域。 在平时项目的开发环境中，经常会遇到跨域的问题，尤其是使用vue-cli这种脚手架工具开发时，由于项目本身启动本地服务是需要占用一个端口的，所以必然会产生跨域的问题。当然跨域有多种解决方式，这里就不一一例举，下次弄篇文章单独讲，在使用webpack做构建工具的项目中使用proxyTable代理实现跨域是一种比较方便的选择。 如何使用pr...
Vue项目实战（六）将接口用 webpack 代理到本地
huangshulang1234的博客
01-08 4181
Vue项目实战（六）将接口用 webpack 代理到本地 这一篇介绍将vue如何将接口用 webpack 代理到本地，公众号已经准备了vue实战教程，如果您有需要，可以在公众号回复“vue”获取。 在上一篇博文《Vue项目实战（五）配置 Axios api 接口调用文件》中，我们已经非常顺利的调用到了 cnodejs.org 的接口了。但是，我们可以注意到我们的sr
摆脱跨域限制,配置 webpack 将接口代理到本地
weixin_34279246的博客
09-20 588
2019独角兽企业重金招聘Python工程师标准>>> ...
使用webpack来反向代理本地接口
朱登凯的专栏
08-15 722
问题场景： 在前后端分离的项目中，在开发阶段，前端项目如何调用后端的接口而不用考虑跨域问题。 本文将通过webpack的配置来实现。 实现方式 在根目录下找到(或新建) vue.config.js 文件，内容如下 module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', pathRewri
vue webpack反向代理
09-13
在Vue项目中使用Webpack反向代理可以帮助我们解决跨域请求的问题。下面是一些步骤可以帮助你实现反向代理： 1. 首先，安装`http-proxy-middleware`库：在终端中运行命令`npm install http-proxy-middleware --save-dev`。 2. 在Vue项目的根目录下创建一个`vue.config.js`文件，如果已经存在则打开该文件。 3. 在`vue.config.js`文件中添加以下配置： ```javascript const proxyMiddleware = require("http-proxy-middleware"); module.exports = { devServer: { proxy: { "/api": { target: "http://api.example.com", // 你想要代理的域名 changeOrigin: true, pathRewrite: { "^/api": "" // 如果接口没有`/api`前缀，可以进行修改 } } } } }; ``` 在上述代码中，我们使用`proxy`选项来配置反向代理。`/api`是前端请求的接口，通过代理将请求转发到`http://api.example.com`域名下。你可以根据实际情况修改这些配置。 4. 保存文件并重新启动Vue开发服务器。现在，所有以`/api`开头的请求都会被代理到目标域名，并通过Webpack提供的反向代理进行转发。 这样配置后，你可以在Vue项目中使用相对路径 `/api/xxx` 来请求你的后端接口，Webpack会将这些请求转发到目标域名。 注意：如果你的后端接口已经支持了跨域请求，你可以直接在前端访问后端接口，而不需要配置反向代理。反向代理的作用主要是在开发环境中模拟跨域请求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值