首页 > 其他分享 >vue3 vite代理配置,解决跨域问题

vue3 vite代理配置,解决跨域问题

时间:2022-11-07 16:25:03浏览次数:44  
标签:axios 跨域 代理 api vue3 vite

vite.config.ts 根目录文件配置

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true, //自动打开 
    base: "./ ", //生产环境路径
    proxy: { // 本地开发环境通过代理实现跨域,生产环境使用 nginx 转发
      // 正则表达式写法
      '^/api': {
        target: 'http://localhost:5067/api', // 后端服务实际地址
        changeOrigin: true, //开启代理
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

  

页面 axios  baseURL的配置,匹配代替地址
    axios.defaults.baseURL ='/api'
    let req = axios({ method: "post", url: "/Student/GetStudent" })
    req.then(res => {
        alert(JSON.stringify(res))
    })

  

标签:axios,跨域,代理,api,vue3,vite
From: https://www.cnblogs.com/tik2012/p/16866356.html

相关文章

  • Vue3, setup语法糖、Composition API全方位解读
    起初Vue3.0暴露变量必须return出来,template中才能使用;Vue3.2中只需要在script标签上加上setup属性,组件在编译的过程中代码运行的上下文是在setup()函数中,无......
  • Vue3知识点之数据侦测
    Vue的核心之一就是响应式系统,通过侦测数据的变化,来驱动更新视图。实现可响应对象的方式通过可响应对象,实现对数据的侦测,从而告知外界数据变化。实现可响应对象的方式:g......
  • Vue3必会技巧-自定义Hooks
    Vue3自定义Hooks定义:个人理解:一些可复用的方法像钩子一样挂着,可以随时被引入和调用以实现高内聚低耦合的目标,应该都能算是hook;为什么Vue3要用自定义Hook?:结论:就是为了......
  • Vue3源码解读之patch
    例子代码本篇将要讲解domdiff,那么咱们结合下面的例子来进行讲解,这个例子是在上一篇文章的基础上,加了一个数据变更,也就是list的值发生了改变。html中增加了一个按钮change......
  • vite+vue3中使用less
    官网<Less.js用法|Less.js中文文档-Less中文网(bootcss.com)>文章<vite+vue3中配置less-掘金(juejin.cn)><vite+vue3中配置less-博客园>一.vite.co......
  • Vue面试题44:Vue3为什么要用Proxy代替defineProperty?(总结自B站up主‘前端杨村长’视频,
    分析Vue3中最重大的更新之一就是响应式模块reactivity的重写。主要就是用Proxy替换`defineProperty实现响应式;此变化主要是从性能方面考量;思路属性拦截的几种方......
  • 常用跨域配置
    @BeanpublicCorsFiltercorsFilter(){CorsConfigurationconfig=newCorsConfiguration();config.setAllowCredentials(true);config.addAllowedOrigin("*");......
  • 初识vue3
    Vue3vue3安装vue--version##安装或者升级你的@vue/clinpminstall-g@vue/cli##创建vuecreatemyv3##启动cdmyv3npmrunservevue3特点新增组合式api......
  • Vue3 用keep-alive实现tab页缓存
    一般国产味道的后台界面,都会有一个类似于浏览器tab标签的东西大概就是这样的,可以点击标签切换不同的路由,并且不丢失之前录入的数据。但是vue-router默认是不支持该操......
  • vue3+vite+ts大屏自适应
    安装依赖pnpminstallamfe-flexiblepostcss-px2rem-S main.ts引入import'amfe-flexible'  根目录新建文件postcss.config.cjsmodule.exports={"p......