vite+vue3 proxy配置代理服务器解决本地运行跨域问题

vite+vue3 proxy配置代理服务器解决本地运行跨域问题

1. 什么是跨域呢?
首先,明白什么是同源策略?同源就是指 协议、域名、端口 都要相同,其中任何一个不同都会出现跨域。例如:

http://www.xxx.***:8000
// http 是协议
// www.xxx.*** 是域名
// 8000 是端口

跨域,是指浏览器不能执行其他网站的脚本。是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制,是浏览器的行为。

特别是前后端分离的模式下,由于前后端域名不一致,就会出现跨域问题。

2.访问接口控制台报错

3. vite+vue3如何解决
在本地想请求后端的 一个接口 “http://xxx/api/test”,proxy配置如下
vite.config.ts文件

  server: {
      port: 4000, // 设置服务启动端口号
      open: true, // 设置服务启动时是否自动打开浏览器
      cors: true, // 允许跨域

      // 设置代理,根据我们项目实际情况配置
      proxy: {
        '/apiTest': { //apiTest是自行设置的请求前缀,按照这个来匹配请求,有这个字段的请求,就会进到代理来
          target: 'http://xxx/api',
          changeOrigin: true, //是否跨域
          rewrite: (path) => path.replace('/apiTest', '') 重写匹配的字段,如果不需要放在请求路径上,可以重写为""
        }
      }
  }

xxx.vue 访问

 axios.post("/apiTest/api/test").then(res=>{})

配置后,重新启动运行项目,就可以正常访问接口了

需要注意的是:
在打包后,部署后tomcat下,还是会跨域,所以想要彻底解决问题,还是需要后端接口代码加上跨域的相关配置

转载请说明出处内容投诉
CSS教程_站长资源网 » vite+vue3 proxy配置代理服务器解决本地运行跨域问题

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买