首页 > 其他分享 >VUE解决跨域的proxyTable

VUE解决跨域的proxyTable

时间:2023-04-07 17:14:14浏览次数:41  
标签:VUE 跨域 proxyTable pathRewrite xx api 9001 localhost

找到问题:
因为java服务运行在localhost:9001端口,vue运行在localhost:8080端口,不同端口存在跨域问题。所以我使用了反向代理处理。
在vue.config.js里:

proxyTable: {
      '/api':{
        target:'localhost:9001',
        // secure:true,
        changeOrigin:true,
        pathRewrite:{
          "^/api":""
        }
      }
    }

这里在mac和windows上写法不一样
windows:"target": "localhost:9001"
mac:"target": "http://127.0.0.1:9001"
pathRewrite 详解:

1.要理解pathRewrite,首先要明白proxyTable下‘/api’的作用。
使用代理, 首先需要有一个标识, 标明哪些连接需要使用代理,只有有标识的连接才用代理。”/api”就是告知,接口以”/api”开头的才用代理,所以写请求接口时要使用“/api/xx/xx”的形式,使用代理后生成的请求路径就是’http://localhost:9001/api/xx/xx’.

2.pathRewrite中 “^/api”:""的作用
当实际需要请求的路径里面没有”/api“时. 就需要 pathRewrite,用"^/api":"", 把'/api'去掉, 这样既能有正确标识, 又能在请求到正确的路径。

标签:VUE,跨域,proxyTable,pathRewrite,xx,api,9001,localhost
From: https://www.cnblogs.com/reallife/p/17296758.html

相关文章

  • vue全家桶进阶之路29:Element Plus
    ElementPlus是一个用于Vue.js的UI组件库,为开发人员提供了一组可重用和可定制化的组件,用于构建现代Web应用程序。它是流行的ElementUI库的扩展,重点是提高性能和可访问性。ElementPlus包括广泛的组件,如按钮、表单、表格、对话框等。除了常规的UI组件外,ElementPlus还提供了一些......
  • 解决跨域问题
    首先理解一下跨域:比如:  从http://localhost:8601 到  http://localhost:8602 由于端口不同,是跨域。从http://192.168.101.10:8601 到  http://192.168.101.11:8601 由于主机不同,是跨域。从http://192.168.101.10:8601 到  https://192.168.101.10:8601......
  • vue生产环境跨域不生效
    vue生产环境跨域不生效开发环境跨域项目集成了百度地图的api,在接入ip查询地址等功能时返回跨域报错,所以使用vite配置文件配置服务代理来解决。传送门生成环境失效测试跟我说内网功能失效了,在验证了程序确实build到最新版本之后,使用f12发现了api访问的地址并没有代理到百度地图......
  • 免费分享前端面试题,vue面试题,TypeScript基础知识点 PDF格式
    免费分享前端资料,面试题,电子书接前端开发,带徒弟,一对一教学,远程协助,bug修改微信:......
  • VUE - 自定义字体
    VUE-自定义字体文中以HYAlzheimer.ttf字体为例1. 下载字体,复制到项目中assets/font文件夹下    创建 font.css 文件@font-face{font-family:'HY';src:url('HYAlzheimer.ttf');/*font-weight:normal;font-style:normal;*/}  全文......
  • Vue3.0学习二
    组合式API:setup在beforecreate之前就执行了。import{ ref,toRefs, toRef,h}from'vue'export  default {props:{name:{type:String}},//setup中使用props中的数据setup(props,context){//propsconsole.log(prop......
  • vue前端纯小白向快速扫盲贴集合
    看的一些博客,对于刚入门被前端各种东西搞得头昏的小白扫盲还是很有帮助的,可以快速理解前端总说的一些东西到底是干什么的。1创建vue项目所需外部环境nodenpm vue/cli脚手架  官网下载node.js直接下一步下一步即可,管理员打开cmd执行node-v正确返回版本  如何升级......
  • 支持多种文件(docx、excel、pdf)预览的vue组件库,支持vue2/3。
    原文链接https://github.com/501351981/vue-office 功能特色一站式:提供docx、pdf、excel多种文档的在线预览方案,有它就够了简单:只需提供文档的src(网络地址)即可完成文档预览体验好:选择每个文档的最佳预览方案,保证用户体验和性能都达到最佳状态安装#docx文档预览组件......
  • Vue中axios请求后res返回204,no content,res.data为undefind
    一直以为后台只要返回200-299之间的状态码就没问题,就是这个错误认知,花了三个小时终于想到解决办法附上axios 地址  axios中文文档|axios中文网|axios(axios-js.com)前面一直想着后台能接收处理请求,肯定不是后台问题,一直花时间配置前端请求指令,以及设置响应拦截器查看情况......
  • 使用vue2从零开始搭建自己的组件库(完整版)
    前言在前端开发中,除了常用的UI组件库以外,我们还会涉及到基于公司业务,需要定制化开发一些业务组件,还有随着项目的增多,开发人员的增多,为了提高工作效率,我们就需要统一管理好已开发好的业务组件。这时候我们就需要搭建自己的组件库,因为涉及到一些公司的业务,我们只能发布到私服的npm......