vue3前端代理,反向代理解决跨域问题(2024-7-18)

跨域原理

浏览器同源策略: 协议、域名和端口都相同是同源,浏览器会限制非同源请求读取响应结果。

本地开发环境通过 Vite 配置反向代理解决浏览器跨域问题.

生产环境则是通过 nginx 配置反向代理 。

vite.config.ts 配置代理

javascript 复制代码
server: {
    proxy: {
      '/v1': {
        target: 'https://api-ivm.com', //华为云远程服务,
        rewrite: path => path.replace(/^\/v1/, ''),
        changeOrigin: true,
        secure: false,
      }

    },
  },

表面肉眼看到的请求地址: http://localhost:3000/v1/users/me

真实访问的代理目标地址: https://api-ivm.com/v1/users/me

相关推荐
别跟老夫聊头发3 分钟前
vue缩放/放大时,实时更新/变换显示高度
vue.js
1024小神3 分钟前
Cocos游戏开发中,检测两个物体碰撞,并实现物理反弹逻辑
前端·javascript
拾光拾趣录5 分钟前
Vue Router 执行顺序
前端·vue.js·vue-router
前端权6 分钟前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户3802258598246 分钟前
vue3源码解析:调度器
前端·vue.js
一一一87116 分钟前
javaScript数据存储, 对象和原型与原型链
javascript
Dolphin_海豚29 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件32 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
WTSolutions1 小时前
Excel 转 JSON by WTSolutions API 文档
javascript