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

相关推荐
边洛洛1 小时前
路由传参、搜索、多选框勾选、新增/编辑表单复用
前端·javascript·vue.js
breakthrough_011 小时前
创建一个简单的 Nuxt.js 应用
开发语言·javascript·ecmascript
OEC小胖胖2 小时前
Vue 3 中 onUnload 和 onPageScroll 使用详解
前端·javascript·vue.js·前端框架·web
秋田君3 小时前
uniapp中使用Mescroll实现下拉刷新与上拉加载项目实战
javascript·uni-app
川石教育4 小时前
Vue前端开发-slot传参
前端·vue.js·前端框架·前端开发·slot组件
确实菜,真的爱4 小时前
vue3 element plus 把表格数据导出到excel
javascript·vue.js·excel
一舍予4 小时前
nuxt3项目搭建相关
开发语言·javascript·vue.js·nuxt
新时代的弩力4 小时前
【Cesium】--viewer,entity,dataSource
前端·javascript·vue.js
无恃而安4 小时前
localStorage缓存 接口 配置
javascript·vue.js·缓存
余道各努力,千里自同风4 小时前
HTML5 视频 Vedio 标签详解
前端·音视频·html5