Vite构建VUE+Axios解决跨域by CORS policy: No ‘Access-Control-Allow-Origin’ header问题

本来想要使用Axios插件get测试一下,谁曾向出了这茬子事,花了近一个小时去解决这个跨域问题,这是什么事啊!

在网上寻这看那的,就是没找到一篇关于基于Vite构建VUE去解决跨域的解决方案,全部都是VueCLI下的解决方案。说好的官方脚手架为啥国内用的人这么少?我看更新速度也不赖呀,难道大家都不用VUE了吗?

先附上VueCLI下的解决方案(万一有人需要呢):

在vue.config文件里面配置,如下代码 (如果没有 vue.config文件就新建一个)

//在vue中使用proxy进行跨域的原理是:
//将域名发送给本地的服务器(启动vue项目的服务,loclahost:8080),
//再由本地的服务器去请求真正的服务器。

module.exports = defineConfig(
   devServer: {
    open: true,
    proxy: {
 
        "/api": {//表示拦截以/api开头的请求路径
        target: "要访问的目标地址",
        ws: true,
        changOrigin: true,//是否开启跨域
        pathRewrite: {
          "^/api": ""  //重写api,把api变成空字符,因为我们真正请求的路径是没有api的
        }
 
      }
    }
  }
})

 

 

当我试遍了各种七七八八的解决方案却还是没法得以解决之后,我意识到是否是因为构建工具不同,导致配置格式不同。但我也并没有看到哪篇文章提到它是使用哪种构建工具。带着郁闷的头绪,我打开了vite官方文档,幸运的是在那里找到了我的答案。

好的,不说废话了。最后附上Vite构建下设置允许跨域的解决方案

同样vue项目根目录下找到vue.config.js文件。在export default defineConfig下添加server属性

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server:{
    proxy:{
      '/api':{//表示拦截以/api开头的请求路径
        target:'https://www.unitymake.com',
        changeOrigin: true,//是否开启跨域
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

参考文档:开发服务器选项 | Vite 官方中文文档 (vitejs.dev)

 

1、为什么要重写api变为空字符?

因为如果像我们那样配置好后,我们请求的实际路径会带上api,但我们发起请求的时候是不需要api的,所以要把他变成空字符。

2、在vue中使用proxy进行跨域的原理是:

将域名发送给本地的服务器,再由本地的服务器去请求真正的服务器。

作者:Miracle
来源:麦瑞克博客
链接:https://www.unitymake.com/archives/programming-life/world-wide-web/3262
本博客所有文章除特别声明外,均采用CC BY-NC-SA 4.0许可协议,转载请注明!
THE END
分享
打赏
海报
Vite构建VUE+Axios解决跨域by CORS policy: No ‘Access-Control-Allow-Origin’ header问题
本来想要使用Axios插件get测试一下,谁曾向出了这茬子事,花了近一个小时去解决这个跨域问题,这是什么事啊! 在网上寻这看那的,就是没找到一篇关于基于Vite……
<<上一篇
下一篇>>
文章目录
关闭
目 录