vue跨域proxy代理配置详解

2024-03-01 21:57:22

引言

相信很多人都用过proxy，这里就不多说proxy的基本使用，这里要说一下很多人使用proxy的一个误区，大家一般都是直接将管官方的例子拿过来，修改一下代理目标直接就是用了，但是代理的路径匹配你真的会用么？

如果你能够认证看完那么我保证你下次再配置代理的时候就能一步就能完成，无需多次npm run serve

先来一个正则热热身待会需要用，看懂了再往下看：

例一

这是我使用express自己搭建的一个超级简单的服务器，代码如下(没有设置允许跨域请求)

// 引入 express 框架
const express = require("express")
// 创建网站服务器
const app = express()
app.get("/list", (req, res) => {
  // 向客户端直接响应一个对象
  res.send({ name: "张三", age: 333 })
})
app.get("/aa/api/list", (req, res) => {
  // 向客户端直接响应一个对象
  res.send({ name: "李四", age: 666 })
})
app.get("/aa/list", (req, res) => {
  // 向客户端直接响应一个对象
  res.send({ name: "王五", age: 888 })
})
// 监听端口
app.listen(3000)
console.log("网站服务器启动成功")

下面是我的vue.config.js的配置信息

const path = require("path")
module.exports = {
  devServer: {
    // open: true, //打开浏览器
    overlay: {
      //当出现编译错误或警告时，在浏览器中显示全屏覆盖。
      warnings: false, //不显示警告
      errors: true, //显示错误
    },
    proxy: {
      //下面的key是一个正则表达式它的/api前加上^和不加^符号差别非常大
      "/api": {
        target: "http://localhost:3000",
        pathRewrite: {
          //下面的key是一个正则表达式它的/api前加上^和不加^符号差别非常大
          "^/api": "",
        },
      },
    },
  },
  runtimeCompiler: true,
  lintOnSave: false,
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
  },
}

大家只需要关注下面的一部分就可以了，其他的对这次讲解没有影响：

发送请求的代码如下：

<template>
  <div>
    <!-- 测试跨域，这个测试的非常好 -->
    <el-button @click="send1" type="success">点我发送请求1</el-button>
    <el-button @click="send2" type="success">点我发送请求2</el-button>
  </div>
</template>
<script>
import { axiosImpl } from "@/utils/request"
export default {
  methods: {
    async send1() {
      let res = await axiosImpl.get("/aa/api/list")
      console.log(res)
    },
    async send2() {
      let res = await axiosImpl.get("/api/list")
      console.log(res)
    },
  },
}
</script>
<style></style>

很简单的几行代码，那么此时点击两个按钮会分别输入什么呢？

看结果：

也许想的和你不太一样，那么这就是我们要说的重点了，在圈1和圈2圈起来的地方，是一个正则表达式

由于此时圈1没有加^符号，那么所有带有/api的请求都会进来，然后进行代理，在进行pathRewrite的时候，由于加上了^符号，那么就只会匹配以/api开头的路径，把以/api开头的这一个/符号和三个字母变为空，其余的都保留下来，因此第一个请求到服务器就变成了/aa/api/list，第二个就变成了/list，因此结果就变成了上面的样子。

例二

如果将vue.config.js的值改成下面的这个样子，其余的不变，结果又会是什么呢？

结果如下：

原理和上面的一样

由于此时圈1加上了^符号，那么所有以/api开头的请求都会进来，然后进行代理，在代理的时候，由于没有上了^符号，那么就会吧路径中所有的/api都变成空，对于请求二到最后到服务器就只剩下了一个/list，因此结果就变成了上面的样子。

总结

圈一和圈二的地方都是正则表达式，再配置proxy的时候一定要看清楚有没有加^符号或者^符号有没有加错，或者是不是写成了正则表达式里面的其他符号

到此这篇关于vue跨域proxy代理配置详解的文章就介绍到这了,更多相关vue proxy内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue项目配置跨域访问和代理proxy设置方式

在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题.有2种常用的解决方案后端设置允许跨域访问前端通过代理进行访问后端下面我们只说说如何配置vue-cli代理访问: vue-cli代理最简单就是配置vue conifg进行实现下面配置3个请求的后端,分别是: 请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/* 请求http://localhost:4201/portalapi/*会代理请求ht
vue之proxyTable代理超全面配置流程

目录前言介绍配置分离 1. config.dev.js 2. proxyTableHandler.js 效果如下前言用了vue有一年多了,从最初的摸着石头过河到现在已经能熟练的使用vue开发项目,学到了许多,特别是vue的代理配置让我眼前一亮,甚是喜欢,故将自己对proxyTable代理配置整理出来,供致力于的开源的同辈浏览,望大家手下留情,哈哈_. 介绍 vue的proxyTable是用于开发阶段配置跨域的工具,可以同时配置多个后台服务器跨越请求接口,其真正依赖的npm包是http-
vue cli3 配置proxy代理无效的解决

vue cli3 创建的vue项目配置开发环境代理无效,网上的各种配置都试了,还是不行,最后终于试出来一种配置方法 vue.config.js配置如下内容(不要配置任何多余的选项,什么changOrigin pathRewrite 之类的东西都不要配): module.exports = { devServer: { proxy:"http://127.0.0.1:8081", port: 8085 } } axios访问的时候不要配置任何东西,axios里访问的url不需要加任何前缀
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法

vue-cli 3.x 的beta版本,基于iview做的公司的角色权限管理平台. 3.x 版本对整个项目的构建都有很大的改动,没有原先的config文件夹,没有dev.env.js和prod.dev.js,看了教程,要自己在根目录建vue.config去配置,如果你用axios,关于代理的配置,如下: 在vue.config.js中配置: 以上这篇vue-cli 3.x 配置Axios(proxyTable)跨域代理方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我
VueCli4项目配置反向代理proxy的方法步骤

Vue Cli4创建项目之后,没有配置vue.config.js,如果直接发起axios请求,可能会引起跨域问题. 以豆瓣电影首页的最近热门为例: axios({ method: "get", url: "https://movie.douban.com/j/search_subjects", params: { type: "movie", tag: "热门", page_limit: 50, page_start: 0
vue-cli项目代理proxyTable配置exclude的方法

问题描述如果是前后端分离的项目,本地开发环境需要访问mock,或者在调试时直接访问线上的接口,这时候就会有接口跨域的问题(mock不存在跨域问题,但是用这个方法配置起来方便,姑且算是一个问题).以vue-cli生成的项目为例,需要配置 config/index.js 中的 proxyTable 属性,大概如下: proxyTable: { '/pc/my/list/': { target: 'http://10.132.20.14:8083/mockjsdata/66', pathRewrit
vue服务器代理proxyTable配置如何解决跨域

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

在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http://localhost:8080 这样的访问页面,但是我们的接口地址是 http://xxxx.com/save/index 这样的接口地址,我们这样直接使用会存在跨域的请求,导致接口请求不成功,因此我们需要在打包的时候配置一下,我们进入 config/index.js 代码下如下配置即可: dev: {
vue跨域proxy代理配置详解

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

目录如何配置跨域,代理域名区分开发环境和生产环境,以及预发布环境可以做什么事补充:解决跨域常用方法一.VUE中常用proxy来解决跨域问题二.JSONP解决跨域三.CORS是跨域资源共享(Cross-Origin Resource Sharing),以 ajax 跨域请求资源,支持现代浏览器,IE支持10以上四.iframe实现跨域总结如何配置跨域,代理域名不管使用什么脚手架,配置代理都是绕不开的话题,下面是vite的代理 server: { proxy: { '/api'
webpack中的代理配置详解

目录作用: 使用场景一: 使用场景二使用场景三使用场景四: 使用场景五: 解决跨域原理 vue-cli中proxyTable配置接口地址代理示例更多参数作用: 1.解决开发环境跨域问题(不用再去配置nginx和host) 2.如果你有单独的后端开发服务器API,并希望在同域名下发送API请求,那么代理某些URL会很有用下面介绍一下五种经常使用的场景使用场景一: 请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/api/xxx, 例如 /api
Springmvc ajax跨域请求处理方法实例详解

上次给一个网站写网站前后端分离最后跪在ajax跨域上面了自己在网上找了个方法亲试可用记录一下写一个类继承HandlerInterceptorAdapter package com.util; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.servlet.handler.Ha
面试突击之跨域问题的解决方案详解

目录 1.跨域三种情况 2.跨域问题演示 2.1 前端网站 2.2 后端接口 3.解决跨域问题 3.1 通过注解跨域 3.2 通过配置文件跨域 3.3 通过 CorsFilter 跨域 3.4 通过 Response 跨域 3.5 通过 ResponseBodyAdvice 跨域 4.原理分析演示项目源码总结跨域问题指的是不同站点之间,使用 ajax 无法相互调用的问题.跨域问题本质是浏览器的一种保护机制,它的初衷是为了保证用户的安全,防止恶意网站窃取数据. 但这个保护机制也带来了新的问题
java 请求跨域问题解决方法实例详解

java 请求跨域问题解决方法实例详解新建Util类,在Util中添加下面方法: /* * response请求跨域公共设置 */ public static HttpServletResponse SetHttpServletResponse( HttpServletResponse response) { response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader(&qu
Java JWT实现跨域身份验证方法详解

目录 1.JWT简介 2.JWT的结构 2.1 头部(header) 2.2 载荷(payload) 2.3 签证(signature) 3.JWT的原则 4.JWT的用法 5.JWT的问题和趋势 6.整合JWT令牌 6.1 在模块中添加jwt工具依赖 6.2 创建JWT工具类 1.JWT简介 JWT(JSON Web Token)是目前流行的跨域认证解决方案,是一个开放标准(RFC 7519),它定义了一种紧凑的.自包含的方式,用于作为JSON对象在各方之间安全地传输信息.该信息可以被验证和信
JS前端同源策略和跨域及防抖节流详解

目录引言 jQuery中JSONP的实现防抖[重要] 缓存搜索的列表 1 定义全局缓存对象 2:将搜索结果存储到缓存对象中 3优先从缓存中获取搜索列表节流[重点] 防抖和节流的区别引言协议,域名,端口相同,就具有相同的源同源策略:浏览器提供的一个安全策略跨域的出现原因:浏览器的同源策略不允许非同源的URL之间进行资源的交互解决跨域由两种方式:JSONP, CORS JSONP: 只支持GET请求通过script标签的src属性,请求跨域的数据接口,并通过函数调用的形式,接收跨域
Nginx解决前端访问资源跨域问题的方法详解

被前端跨域问题折磨快2天后,终于用ngnx的方式解决了,所以在此总结下. 该篇只探讨如何用Ngnx解决跨域问题,对于原理不作讨论. 1.首先介绍Windows环境下Nignx的相关命令操作 nginx常用命令: 验证配置是否正确: nginx -t 查看Nginx的版本号:nginx -V 启动Nginx:start nginx 快速停止或关闭Nginx:nginx -s stop 正常停止或关闭Nginx:nginx -s quit 配置文件修改重装载命令:nginx -s reload 在停
vue使用axios跨域请求数据问题详解

axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader("Access-Control-Allow-Origin", www.allow-domain.com) 但是很多时候,后台出于一些原因不想修改或者已经写好jsonp的接口需要适应不同平台,此时,前端就可以单独引入依赖解决该问题了. 引入依赖 cnpm install jsonp 导入到vu

vue跨域proxy代理配置详解

目录

引言

例一

例二

总结

相关推荐

随机推荐