vue项目proxyTable配置小结

目录
  • 前言
  • 如何配置proxyTable
  • 关于proxyTable的原理

前言

proxyTable是一个用于Vue.js应用程序的配置选项，它允许您在开发过程中代理后端API请求。这一功能的作用是解决由于浏览器的同源策略所限制而导致的跨域请求问题。当前端应用程序部署在一个Web服务器上并向不同的后端API发送请求时，这个功能就变得尤为重要。

在Vue.js应用程序中使用proxyTable的主要优点是能够简化配置，方便地进行本地开发和调试。在开发过程中，可以将所有的API请求都代理到本地的开发环境中，从而避免了跨域请求的问题，并且可以通过简单地更改proxyTable配置来切换后端API的地址。此外，还可以通过proxyTable轻松地模拟网络延迟和错误，以测试应用程序处理这些情况的能力。

总之，proxyTable是一个非常有用的工具，可以帮助Vue.js应用程序开发人员轻松地解决跨域请求问题，并加快开发和调试的速度。
1，浏览器的同源策略不允许跨域访问，所谓同源策略是指协议、域名、端口相同
2，在使用webpack做构建工具的项目中使用proxyTable代理实现跨域是一种比较方便的选择。

如何配置proxyTable

找到根目录下config文件夹下的index.js文件。由于我们是在开发环境下使用，配置在dev里面：

 dev: {
    env: require('./dev.env'),
    port: 8070,
    autoOpenBrowser: true,
    assetsSubDirectory: './',
    assetsPublicPath: '/',
    // quiet: true, // 如果使用webpack-dev-server，需要设为true，禁止显示devServer的console信息
    proxyTable: {
      '/base': {
        target: 'https://xxxxx/',
        changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          '^/base': '/'   // 重写接口
        }
      },
    },

和pre环境配置/base相匹配
上面这段代码的效果就是将以/base字段起始的本地接口请求代理到了https://xxxxx/这一域名下：

//先人为给接口地址前面加上一个自定义的项目名
const VUE_APP_CALL='"/base/api/app/tcloud-scrm-call"'
项目名base是我们人为加上去的，经过代理之后就没了，这样我们在配置代理这里只需要配置一份就够了，只是在写接口地址时要注意区分开发环境和线上环境就可以了

在这个文件下配置环境地址域名server

关于proxyTable的原理

在Vue.js应用程序中，当proxyTable选项被配置时，请求将首先被发送到Webpack开发服务器。如果请求的URL与proxyTable中的某个属性匹配，则该请求将被代理到指定的后端API服务器，而不是直接向目标服务器发送请求。代理过程实际上是在开发环境中创建了一个反向代理服务器。

反向代理服务器接收到请求之后，将对其进行一些处理，并将其转发到后端API服务器。这样做的好处是我们可以通过反向代理服务器来控制请求的流量、限制跨域请求并提高安全性。同时，通过配置proxyTable选项，我们还可以在开发和生产环境中使用相同的API地址，从而减少出错的可能性。

总之，proxyTable选项的原理是在Webpack开发服务器和反向代理服务器的帮助下，将请求转发到后端API服务器，以实现跨域请求的代理和控制。

到此这篇关于vue项目proxyTable配置小结的文章就介绍到这了,更多相关vue proxyTable配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 使用proxytable 配置解决 vue-cli 的跨域请求问题【推荐】

    使用proxytable 配置解决 vue-cli 的跨域请求问题【推荐】

    本文适用人群: 会使用 vue-cli 搭建一个基本的 vue webpack 项目,本文的目录结构基于 webpack 模板结构 懂得 axios 基本用法 问题导向 日常开发中,前端经常需要通过 ajax 从后端获取数据.而在这种前后端分离的开发模式下,往往前端项目与后端项目的 IP地址.端口号.协议 大概率是不一样的,由于浏览器的安全策略设定,不进行相应配置的话,前端的请求就会被浏览器拦截掉啦. 假设某个页面组件在加载的时候会向后端发送一个请求,然后根据返回的结果来渲染页面.代码示例如下:

  • vue2.0设置proxyTable使用axios进行跨域请求的方法

    vue2.0设置proxyTable使用axios进行跨域请求的方法

    这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装axios npm install axios -S 这里暂不考虑用vuex封装的方式,只讲在当前组件中直接使用. 先在<script>中引入 用prototype将axios添加为vue原生的属性,$ajax相当于axios的别名. 然后在要调用的方法或是钩子中请求,$ajax就是上面注册的axios,如果想直接用axios不想设置prototype也可以直接按官方的

  • vue 设置proxyTable参数进行代理跨域

    什么是代理跨域 浏览器之间有同源策略,出于安全考虑不同域之间不允许获取数据,除了几个特殊的例子 <img>.<script>.<audio>等标签可以进行跨域但是通常都是以get的形式,如果用js的axios去远程获取的话进会触发同源政策,除非你服务端的代码设置了header同意让你访问,明显这很不合理呀!.现在不是都流行前后端的分离吗,后端代码跑掉了只剩下前端了,两个次元的代码我前端该怎么获取啊,感觉使用跨域好麻烦好难搞啊还不一定搞得到,这个时候就可以用到代理跨域了

  • vue服务器代理proxyTable配置如何解决跨域

    vue服务器代理proxyTable配置如何解决跨域

    目录 服务器代理proxyTable配置解决跨域 1.Proxy代理作用 2 .常见情况 3.应用方式 4.具体配置实例 5.配置思路 Vue.proxyTable是什么? 为什么会有proxyTable存在? 配置proxyTable 服务器代理proxyTable配置解决跨域 1.Proxy代理作用 proxy代理作用:前端服务器代理的作用是,告诉服务器任何未知请求(没有匹配到静态文件的请求),代理到一个另一个地址,从而解决跨域的问题. 2 .常见情况 前端在向后端进行资源请求的时候,后端若

  • Vue-cli proxyTable 解决开发环境的跨域问题详解

    和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了一堆参数,最后还得我把自己的localhost映射成上线时将要使用的域名. 今天翻看代码时,突然发现vue-cli的config文件里有一个参数叫proxyTable,看这个名字就感觉能解决问题,于是我就去搜了一下,果然.在vuejs-templates,也就是vue-cli的使用的模板插件里,有关于API proxy的说明,使用的就是这个参数. https://vuejs-t

  • Vue proxyTable配置多个接口地址,解决跨域的问题

    最开始的时候,因为请求后台出现跨域问题. 查找资料配置proxyTable,解决跨域问题.如下图所示: axios请求页面: this.$axios.post('/api/weblogin/login',data).then(res=>{ console.log(res) }) 后面遇到需要连接不同的接口域名,我在proxyTable里增加了一个apiGas.axios请求存在获取得到api但是不能获取apiGas(提示请求资源不存在). proxyTable: { '/api': { targ

  • vue proxyTable 接口跨域请求调试的示例

    vue proxyTable 接口跨域请求调试的示例

    在不同域之间访问是比较常见,在本地调试访问远程服务器....这就是有域问题. VUE解决通过proxyTable: 在 config/index.js 配置文件中 dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', //proxyTable: {}, proxyTable: proxyConfig.pro

  • vue项目proxyTable配置小结

    目录 前言 如何配置proxyTable 关于proxyTable的原理 前言 proxyTable是一个用于Vue.js应用程序的配置选项,它允许您在开发过程中代理后端API请求.这一功能的作用是解决由于浏览器的同源策略所限制而导致的跨域请求问题.当前端应用程序部署在一个Web服务器上并向不同的后端API发送请求时,这个功能就变得尤为重要. 在Vue.js应用程序中使用proxyTable的主要优点是能够简化配置,方便地进行本地开发和调试.在开发过程中,可以将所有的API请求都代理到本地的开发

  • 关于vue项目proxyTable配置和部署服务器的问题

    关于vue项目proxyTable配置和部署服务器的问题

    目录 proxyTable配置和部署服务器 1.在config中的index 2.在调取接口的方法中 proxyTable代理参数含义 proxyTable配置和部署服务器 在本地创建node.js服务器,前端访问本地接口需要设置跨域 1.在config中的index 找到proxyTable,完成以下设置 proxyTable: { '/api': { target: 'http://localhost:8808/', //目标接口域名 changeOrigin: true, //是否跨域 p

  • Vue项目全局配置微信分享思路详解

    这个项目为移动端项目,主要用于接入公众号服务.项目采用两种登录方式,微信授权登录以及账号密码登录.对于移动端项目而言,为了便于项目扩展以及提供开发热更新速度,项目分为不同的模块,每个模块是一个单页面应用.页面分为两种,一种是需要用户登录之后才能浏览,另一种是用户无需登录即可浏览.无论哪一种,均配置微信分享. 使用的技术 1.使用vue作为框架 2.使用vux作为UI组件库 全局配置微信分享思路 1.区分一般和特殊,一般情况,全局配置默认分享文案:特殊情况分两种,一种是分享内容不需要异步获取,则在

  • Vue项目中配置pug解析支持

    Vue 的用法没有变化: <template lang="pug"> transition(name="sider") div.hello h3 {{msg}} p(:style="{color:'#000'}", :htmlData="msg") p label button(@click="clickMe") clickTest </template> 要注意的一点是: 标签后面

  • 使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题

    在终端中运行以下命令: vue create xxx // xxx为项目名称,例如 vue-project 然后,系统会提示我们选择默认预设或手动选择功能.使用向下箭头键,我们手动选择功能,然后按Enter键. 然后,我们将看到一系列功能选项.使用向下箭头键,我们将向下移动并使用空格键选择需要的功能,然后按回车键. Linter / Formatter 就是代码风格. 我们将使用 ESLint + Prettier 我们将在保存时添加Lint的附加功能. 我们将选择单独的配置文件. 我们可以选择

  • Nginx部署vue项目和配置代理的问题解析

    Nginx部署vue项目和配置代理的问题解析

    1.nginx安装和启动 # 安装nginx sudo apt-get install nginx # 启动 sudo service nginx start 验证安装 # 安装完成后使用nginx -v检查,如果输出nginx的版本信息表明安装成功 nginx -v # 如果输出类似于这样的版本号等,证明安装完成 nginx version: nginx/1.14.0 (Ubuntu) 2.修改nginx配置文件,部署项目 查看nginx的配置,linux系统下的配置文件通常会存放在/etc目

  • 在vue项目中配置你自己的启动命令和打包命令方式

    在vue项目中配置你自己的启动命令和打包命令方式

    目录 配置自己的启动命令和打包命令 准备 vue项目启动命令的配置与切换 vue启动命令的切换npm run dev和npm run serve配置 修改方法 配置自己的启动命令和打包命令 在开发中,通常会需要和后台做一些开发调试, 本地开发, 和线上观测 这时 如何用一套代码 加上 几个命令来轻松的做到这些? 准备 首先除vue项目外 我们还需要安装几个额外的包来帮助我们 这只是在 vue-cli2 中的配置 当然 vue-cli3 也可以通过如下方法来配置一些环境 npm i cross-e

  • Vue项目全局配置页面缓存之按需读取缓存的实现详解

    写在前面 一个web app的实际使用场景中,有一些情景的交互要求,是记录用户的浏览状态的.最常见的就是在列表页进入详情页之后,再返回到列表页,用户希望返回到进入详情页之前的状态继续操作.但是有些使用场景,用户又是希望能够获取最新的数据,例如同级列表页之间切换的时候. 如此,针对上述两种使用场景,需要实现按需读取页面缓存.由于SPA应用的路由逻辑也是在前端实现的,因此可以在前端对路由的逻辑进行设置以实现所需效果. 使用技术 Vue.js作为主要框架 Vue-router作为前端路由管理器 Vue

  • nginx配置多个vue项目

    需求 nginx 下配置多个 vue 项目 举例: blog: https://www.yoursite.com/blog test: https://www.yoursite.com/test vue项目中配置 vue-router 设置 base 路径 base: '/blog/' config/index.js 修改 assetsPublicPath assetsPublicPath: '/blog/' nginx配置 location /blog { try_files $uri $ur

  • 使用nginx同域名下部署多个vue项目并使用反向代理的方法

    效果 目前有 2 个项目(project1, project2),还有一个 nginx 自带的 index.html,我添加了对应的链接代码(稍后粘贴出来),为了统一管理子项目的路由. 我期望实现下面的效果(假设 ip: localhost,port: 8080): http://localhost:8080/ 进入最外层的 index.html http://localhost:8080/project1 进入项目一 http://localhost:8080/project2 进入项目二 废

随机推荐