vue的代理配置pathRewrite重写不生效问题及解决

目录
  • 代理配置pathRewrite重写不生效
  • webpack代理---pathRewrite
    • 代理到本地

代理配置pathRewrite重写不生效

本人遇到的情况在网上搜索时没有看到本人遇到的情况。

    devServer: {
        proxy: {
            //代理匹配前缀2
            '/api2': {
                target: 'http://localhost:5001',
                pathRewrite: {'^/api2': ''},
                ws: true,
                changeOrigin: true
            },
            //代理匹配前缀1
            '/api': {
                target: 'http://localhost:5000',
                pathRewrite: {'^/api': ''},
                ws: true,)
                changeOrigin: true
            }
        }
    }

开始时配置了/api前缀的代理，没有问题，然后又配置了/api2前缀的配置代理，然后就无法访问/api2前缀的代理了。

原因：就是因为/api在前面，先匹配了/api，例如访问/api2/test，由于先匹配了/api所以重写/api为空字符串后，路径变为了2/test，自然就不对了

解决：把/api2放在/api前面，让api2先匹配到，或者取名叫/api2，让其无法先匹配到/api

webpack代理---pathRewrite

今天遇到个问题，前提是项目是我本地有一份后端，端口号不同，前台4000，后端3100，请求方式4000代理到3100

代理到本地

接口请求方式如下

http://localhost:4000/api/scoringrules/all   //每个请求后面都有/api

配置：

"proxy": {
    "/api": {
      "target": "http://localhost:3100",
      "changeOrigin": true,
      "pathRewrite": {     // 如果接口本身没有/api需要通过pathRewrite来重写了地址,这里把/api转成‘ '
        "^/api": ""
      }
    }
  },

pathRewrite：重写路径

后端识别时候把/api替换成空，后端没有/api

/api只是作为区分路由和接口的方式

具体要不要配置pathRewrite,要看前端的请求方式，以及后台的接受方式

ps：

比如：我在配置本地的时候

前端请求的参数的时候有/api，来区分网页还接口，但是后台接受的没有,则需要如上配置

但是：我在配置都域名的时候，域名接口地址是带/api的，所以此时无需配置pathRewrite

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue-cli 接口代理配置

    本文介绍了vue-cli 接口代理配置,分享给大家,具体如下: 一些同学在配置接口代理时,会有疑问 我配置成功了为什么接口还是不通 ,其实代理已经成功 只是 接口访问地址规则没搞清楚 下面以本地测试为栗子 向大家介绍 一些基本操作这里就不介绍了 找到vue-cli config 文件夹下的 index.js  这是是配置接口规则的文件 同目录下建立 proxyConfig.js  一些同学习惯直接在原文件修改 ,也是可以但推荐使用新建文件的方式: module.exports = { proxy

  • vue（2.x，3.0）配置跨域代理

    vue（2.x，3.0）配置跨域代理

    导语:首先,每一个前端开发人员都应该知道同源策略,同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源,所谓同源是指,域名,协议,端口相同.有一个不同时,都将请求不到资源,将无法"跨域"获取资源. vue3.0 从最新版开始,首先是在所有请求的文件中写好请求 import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxio

  • Vue使用Proxy代理后仍无法生效的解决

    vue.js 配置了前端代理却未能生效 记录一下最近踩得小坑: 配置完代理后请一定重新执行(重要,非常重要!) npm run dev 若重新执行命令后,代理仍为生效,请按下方步骤进行检查: 检查index.js文件中的代理是否配置正确,示例如下: proxyTable: { '/api': { //代理标识 target: 'http://xxx.xxx.xxx',//指向的实际地址 changeOrigin: true, // 允许跨域 pathRewrite: { // 标识替换 // 原

  • vue代理和跨域问题的解决

    一.安装vue-resource插件 cnpm install vue-resource --save 在根目录下的package.json检查一下插件的版本 在rourer-index.js下引入文件 import Resource from 'vue-resource' Vue.use(Resource) 引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用http 参考链接 二.安装axios插件 cnpm install --save axi

  • vue的代理配置pathRewrite重写不生效问题及解决

    目录 代理配置pathRewrite重写不生效 webpack代理---pathRewrite 代理到本地 代理配置pathRewrite重写不生效 本人遇到的情况在网上搜索时没有看到本人遇到的情况.     devServer: {         proxy: {             //代理匹配前缀2             '/api2': {                 target: 'http://localhost:5001',                 pathR

  • springboot2.0 配置时间格式化不生效问题的解决

    在开发中日期最常打交道的东西之一,但是日期又会存在各式各样的格式,常见的情形就是,从数据库取出的日期往往都是时间戳(毫秒数)的形式,这个一般情况下是前端不想要的结果,需要进行处理,那在springboot中比较简单: pom.xml中添加依赖 <!-- 日期格式化 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter

  • vue在mounted中window.onresize不生效问题及解决

    目录 mounted中window.onresize不生效 解决方案 window.onresize被覆盖问题 解决方案 mounted中window.onresize不生效 在vue开发中,因为引用的父组件和子组件都使用了window.onresize以至于一个window.onresize失效. 解决方案 可以采用下面的方式 window.onresize = () => this.screenWidth = window.innerWidth  // 改为以下写法 window.addEv

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

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

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

  • Vue多环境代理配置方法思路详解

    背景: 多人协作模式下,修改代理比较麻烦,而且很容易某个开发人员会修改了vue.config.js文件后提交了. 第一,很容易引起冲突. 第二,很容易出现代理错误,需要排查.而且现在微服务盛行,在生产环境下有网关配置,不会出错,但是在本地调试会造成麻烦,如修改了代理地址需要同步修改代理中的地址,很麻烦也很容易出错. 解决思路: 1.开发中定义常量js文件,例如constants.js.用户存放各个服务需要代理的服务名. let api = "" let loginServer = &q

  • vue中如何配置proxy代理

    目录 vue配置proxy代理 proxy常用参数说明 关于/api的详解 部署因为/api无法请求到数据 总结 vue配置proxy代理 如果你的前端应用和后端 API 服务器没有运行在同一个主机上(即解决跨域问题,用proxy代理请求一下),你需要在开发环境下将 API 请求代理到 API 服务器. 这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置. 将 转发到 https://apimusic.linweiqin.com app.vue文件 <

  • vue跨域proxy代理配置详解

    vue跨域proxy代理配置详解

    目录 引言 例一 例二 总结 引言 相信很多人都用过proxy,这里就不多说proxy的基本使用,这里要说一下很多人使用proxy的一个误区,大家一般都是直接将管官方的例子拿过来,修改一下代理目标直接就是用了,但是代理的路径匹配你真的会用么? 如果你能够认证看完那么我保证你下次再配置代理的时候就能一步就能完成,无需多次npm run serve 先来一个正则热热身待会需要用,看懂了再往下看: 例一 这是我使用express自己搭建的一个超级简单的服务器,代码如下(没有设置允许跨域请求) // 引

  • 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如何获取配置代理文件中的api地址值

    vue如何获取配置代理文件中的api地址值

    目录 获取配置代理文件的api地址值 带你了解vue中的API 全局API Vue 实例中的选项 实例属性与方法 特殊的属性 获取配置代理文件的api地址值 一般vue项目中,前后端服务接口调试数据,需要配置api的代理.在代理文件config/index.js中,配置 后台服务的IP地址.如图. 如果想在某个页面上查看,代理的该IP地址. 则在该页面上引入配置文件,在找到对应的值. 引入 import API_CONFIG from "../../../config/index.js"

  • vue设置代理不起作用问题及解决

    vue设置代理不起作用问题及解决

    目录 vue设置代理不起作用 运行后发现报错404 vue配置代理方式 正向代理配置 环境变量配置文件 目录 vue设置代理不起作用 使用vue写前端界面时,需调用后端接口展现查询的数据,于是设置代理实现跨域,在config/index.js中添加代理,代码如下: proxyTable:{ // 匹配 /dev-api 开头的请求, 比如:A网站:https://localhost:8888 中的index.html 页面发送AJax请求:/dev-api/data.json 'dev-api'

随机推荐