首页 > 其他分享 >Vue配置代理(devServer)解决跨域问题

Vue配置代理(devServer)解决跨域问题

时间:2024-09-06 12:24:37浏览次数:11  
标签:axios Vue http 跨域 devServer 代理 XX abc true

1、作用:

Vue官方文档的解释是:

如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

通俗的说,就是为了解决跨域问题。

2、用法:

本篇都以axios发请求为例,样例如下:

1 2 3 axios.get("/abc/def"); axios.get("/abc/ghi"); axios.post("/abc/jkm");

axios发送的请求是本地的服务器地址拼接上发送的请求,如 http://xxx:8080/abc/def

2.1 指定请求开头配置

如果发送的请求都以 /abc 开头,代理配置:

1 2 3 4 5 6 7 8 9 10 devServer: {     proxy: {       "/abc": {         target: "http://XX.XX.XX.XX:8081",         changeOrigin: true,         ws: true,         secure: false,       },     } },
  • “/abc”:{} : 引号中代表,本代理配置,会检测以 /abc 开头的访问
  • target : 代表检测到以 /abc 开头的接口后,将请求中端口、地址,修改为后端接口地址,从而避免发生跨域问题
  • changeOrigin : 是否修改数据包中host参数,默认为true
  • ws : 是否代理 websockets
  • 该代理请求为:

http://localhost:8080/abc/def —> http://XX.XX.XX.XX:8081/abc/def

2.2 代理多个接口

请求示例:

1 2 3 4 // http://localhost:8080/zzz/one axios.get("/zzz/one"); // http://localhost:8080/xxx/two axios.get("/xxx/two");

代理多接口方式1

监测多个接口,可以在proxy中写多个配置

1 2 3 4 5 6 7 8 9 10 11 12 13 14 devServer: {     proxy: {         "/zzz": {           target: "http://XX.XX.XX.XX:8082",           changeOrigin: true,           ws: true,         },         "/xxx": {           target: "http://XX.XX.XX.XX:8083",           changeOrigin: true,           ws: true,         },     }, },

代理多接口方式2

配置axios

1 2 3 4 5 6 7 // 只要发送axios请求,就在请求前加入/api的开头,例如 /zzz/one -> /api/zzz/one axios.defaults.baseURL = "/api"; /* 进行了上方的配置后,在本地发送的请求会变为 http://localhost:8080/api/zzz/one http://localhost:8080/api/xxx/two */

配置代理

1 2 3 4 5 6 7 8 9 10 11 12 13 devServer: {     proxy: {         "/api": {             target: "http://XX.XX.XX.XX:8084",             changeOrigin: true,             ws: true,             pathRewrite: {               "^/api": "",             },         },     }, }, //pathRewrite :检查代理的请求中是否有 /api ,有的话把 /api 替换为冒号后面的内容,案例为替换成空字符串,也就是删去 /api 。(^是正则表达式的内容,意思是限定开头)

3、常见参数

1 2 3 4 5 6 7 8 9 10 11 12 target:"xxx",            // 要使用url模块解析的url字符串 forward:"xxx",           // 要使用url模块解析的url字符串 agent:{},                // 要传递给http(s).request的对象 ssl:{},                  // 要传递给https.createServer()的对象 ws:true/false,           // 是否代理websockets xfwd:true/false,         // 添加x-forward标头 secure:true/false,       // 是否验证SSL Certs toProxy:true/false,      // 传递绝对URL作为路径(对代理代理很有用) prependPath:true/false// 默认值:true 指定是否要将目标的路径添加到代理路径 ignorePath:true/false,   // 默认值:false 指定是否要忽略传入请求的代理路径 localAddress:"xxx",      // 要为传出连接绑定的本地接口字符串 changeOrigin:true/false, // 默认值:false 将主机标头的原点更改为目标URL

 

标签:axios,Vue,http,跨域,devServer,代理,XX,abc,true
From: https://www.cnblogs.com/houxianzhou/p/18399994

相关文章

  • dropdown源码分析 -- ant-design-vue系列
    组件结构dropdown组件对参数做了一些处理,然后直接调用了vc-trigger组件来进行渲染,先看一下整体的组件调用结构。极简实现这个组件需要满足以下几个基本的功能:可以传入两个插槽default和popup,default是默认展示的节点,点击后可以弹出popup。popup可以指定在文档......
  • vc-align源码分析 -- ant-design-vue系列
    vc-align源码分析源码地址:https://github.com/vueComponent/ant-design-vue/tree/main/components/vc-align1基础代码1.1名词约定需要对齐的节点叫source,对齐的目标叫target。1.2props提供了两个参数:align:对齐的配置target:一个函数,用于获取对齐的目标dom1.3主要......
  • tailwindcss学习:1. vue项目配置 tailwindcss
    官网的配置是需要一个cli去生成一份CSS,我简单总结一下更加干货的配置办法:1.pnpmipostcssautoprefixertypescript2.配置postcss.config.cjsmodule.exports={plugins:{tailwindcss:{},autoprefixer:{},},};3.执行npxtailwindcssinit4.项目的sr......
  • 关于Vue2和Vue3的区别及组合式/选项式API区别——高频面试题
    1、vue2和vue3的区别以下包含但不仅仅只有这10条区别但是,在应对面试时,回答已经足够用了,这些也是vue2和vue3的主要区别CompositionAPIvsOptionsAPICompositionAPI:组合式APIOptionsAPI:选项式API——在vue2中使用它们两者在vue3中是组织代码的不同方式Vue3引入了Com......
  • Vue组件之间的传值
    一、父组件给子组件传值:prop1、父组件部分:在调用子组件的时候,使用v-bind将msg的值绑定到子组件上:parentMsg=“msg”<child-component:parentMsg="msg"></child-component>//引入子组件importchildComponentform'@component/childComponent'exportdefault{ //注册子......
  • 详解前端中的跨域及解决措施
    1、跨越介绍1.1、概念概念:跨域是浏览器的同源策略产生的一个限制同源策略:浏览器制定的一个安全策略,这个安全策略的主要目标是:不让我们向别人的服务器发起请求同源策略要求:同域名、同端口号、同协议,不符合同源策略的,浏览器为了安全会阻止这个请求1.2、如何界定服务器......
  • vue+ThreeJS:从0 到1 搭建开发环境
    文章目录一、下载安装(懒人版)二、顺序安装1,下载安装nodejs2,安装vue-cli3,创建vue-three项目。4,安装threeJS5,安装elementUI(选装)最终package.json文件如下:本系列教程是在vue2.X的基础上加载threeJS程序,来开发各种示例程序。一、下载安装(懒人版)下载vue-three系统包,n......
  • 基于django+vue月知晓彩妆销售系统【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景在当今快节奏与高度个性化的消费市场中,彩妆行业以其丰富多样的产品和不断创新的趋势蓬勃发展。随着消费者对美的追求日益提升,彩妆产品的选......
  • 基于django+vue远程就医问诊系统【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展和互联网应用的普及,远程就医问诊系统应运而生,成为解决医疗资源分布不均、患者就医难问题的有效途径。传统医疗模式......
  • 基于django+vue员工信息管理系统【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着企业规模的日益扩大,员工数量激增,传统的人工管理方式已难以满足现代企业对高效、精准、实时信息管理的需求。员工信息管理作为企业日常......