首页 > 其他分享 >vue配置代理服务器proxy

vue配置代理服务器proxy

时间:2023-09-28 10:32:23浏览次数:36  
标签:axios http vue 配置 代理 代理服务器 api proxy

vue配置代理服务器proxy _代理服务器

1.使用vue.config.js文件配置代理:

在Vue项目的根目录下创建一个vue.config.js文件,并添加以下代码:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

devServer配置项来配置代理服务器。其中proxy属性用于配置代理的规则,/api表示需要代理的接口路径。target属性表示代理的目标服务器地址,changeOrigin属性表示是否改变请求的源地址,pathRewrite属性用于重写请求的路径。

2. 使用http-proxy-middleware库配置代理:

在Vue项目的根目录下创建一个vue.config.js文件,并添加以下代码:

const proxyMiddleware = require('http-proxy-middleware');

module.exports = {
  devServer: {
    before(app) {
      app.use(
        '/api',
        proxyMiddleware({
          target: 'http://api.example.com',
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          }
        })
      );
    }
  }
}

http-proxy-middleware库来配置代理服务器。在before方法中,通过app.use方法来使用代理中间件。'/api'表示需要代理的接口路径,target属性表示代理的目标服务器地址,changeOrigin属性表示是否改变请求的源地址,pathRewrite属性用于重写请求的路径。

3.使用axios库的代理配置:

如果项目中使用了axios库来发送请求,可以直接在axios的配置中配置代理。在项目的入口文件(比如main.js)中添加以下代码:

import axios from 'axios';

axios.defaults.baseURL = '/api';
axios.defaults.proxy = {
  host: 'http://api.example.com',
  port: 80,
  protocol: 'http'
};

axios.defaults.baseURL表示请求的基础路径,axios.defaults.proxy表示代理的配置,包括代理服务器的地址、端口和协议。


标签:axios,http,vue,配置,代理,代理服务器,api,proxy
From: https://blog.51cto.com/u_14914383/7636290

相关文章

  • vue下载PDF文件到本地
    方法1.downloadPDF(fileName){//要下载的文件路径varfileUrl='./file/'+fileName;//创建一个隐藏的<a>元素,用于下载文件vara=document.createElement('a');a.href=fileUrl;a.download=fileName;//可以自定义下载文件的名称a.style.displa......
  • 使用vite创建vue3项目
    vite是一种新型前端构建工具,能够显著提升前端开发体验,它主要由两部分组成;一个开发服务器,它基于 原生ES模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资......
  • vue安装及环境配置
    安装:Nodejs安装依赖包node_modules:npminstall安装webpack:npminstallwebpack-gnpminstallwebpack-cli-g安装yarn:npminstall-gyarn执行yarn:yarninstall安装:axiosyarnaddaxios 安装vue.js:npminstallvue-g安装脚手架vue-cli:npminstall-g@vue/cli#ORyarnglobala......
  • 【Vue】彻底搞懂条件&列表渲染
    hello,我是小索奇哈,精心制作的Vue系列持续发放,涵盖大量的经验和示例,由浅入深进行讲解。本章给大家讲解的是条件&列表渲染,前面的章节已经更新完毕,后面的章节持续输出,有任何问题都可以留言或私信哈,一起加油~条件渲染1.v-if这个指令根据表达式的真假来决定是否渲染元素例如:<divv-if......
  • 掌握Vue3 Props:提升你的前端开发技能
    Prop类型到这里,我们只看到了以字符串数组形式列出的prop:props:['title','likes','isPublished','commentIds','author']但是,通常你希望每个prop都有指定的值类型。这时,你可以以对象形式列出prop,这些property的名称和值分别是prop各自的名称和类型:props:{title:S......
  • uniapp自动引入Vue3(ref,reactive...)的API、uniapp生命周期和封装hooks
    未自动导入Vue3(ref,reactive...)的API和uniapp生命周期,需要在每个页面把API和uniapp生命周期的代码都重复写一遍<scriptsetup>import{ref,reactive}from"vue"import{onLaunch,onShow,onHide}from'@dcloudio/uni-app'//封装的hooksimport{useLi......
  • vue-router使用
    vue-router使用组件切换实现页面切换效果,需要借助vue-router来实现1、简单使用页面跳转,写一个页面组件在router--->index.js---routes数组中加入一个路由即可 2、组件中实现页面跳转两种方式方式一:使用router-link标签,to地址<router-linkto="/......
  • vue build index直接打开静态页面
    vite+vue3打包的文件,如果使用类似于nginx或者其他的服务器打开,可以正常打开,但如果直接点击打开index.html文件,页面会白屏,打开调试工具后发现如下跨域的报错。这是因为打包后并不支持file引用协议。这就给混合式开发等时候带来困扰,因为在这种场景下,是有需要直接打开index.html......
  • Vue3
    Vue3介绍 Vue3的变化1.性能的提升打包大小减少41%初次渲染快55%,更新渲染快133%内存减少54%2.源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking(摇树--清除死代码进行优化)3.拥抱TypeScript Vue3可以更好的支持TypeScri......
  • Vue-router的使用、路由守卫、localStorage
    一、路由的使用以后,就是组件的切换实现页面切换的效果-----》必须借助于vue-router来实现。在App.vue中:<router-view/>--->显示组件--->在router/index.js中配置<router-link:to="about_url">---->做页面组件的跳转的基本使用:1.写一个页面组件2.......