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

相关推荐
慧一居士9 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead11 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js