vite跨域问题，你可能需要看这篇文章

最新推荐文章于 2024-08-13 12:18:25 发布

代码魔法师Sunny

最新推荐文章于 2024-08-13 12:18:25 发布

阅读量1.4k

点赞数

文章标签： java 前端 spring

本文链接：https://blog.csdn.net/Hi_alan/article/details/130660207

版权

在使用Vite进行前端开发时遇到跨域问题，文章详细描述了问题出现的原因，即localhost和127.0.0.1的区别，并提供了两种解决方案：一是修改Vite的配置，将地址改为localhost，二是调整SpringMVC的CORS配置。然而，第二种方法可能导致Cookie设置不成功，可能与Chrome的SameSite策略有关。

摘要由CSDN通过智能技术生成

最近在学习项目的时候，使用了vite工具进行构建，然后出现了跨域的问题，中间的曲折不过多叙述，直接进入正题。

前端成功启动后的界面：

在这里插入图片描述
然后在后端进行的Controller上使用了如下的配置

在这里插入图片描述

然后浏览器就会出现跨域的问题

在这里插入图片描述

为什么会出现这个情况了，是因为localhost和127.0.0.1还是有一些区别的，至于区别在哪儿我这里就不详述了，可以参考这篇文章。点击跳转

解决方案：

修改vite的地址改为localhost
1. 直接用localhost访问。
  
  这里有说使用host暴露，所以我就尝试了一下，果然没有再报错了。
2. 改配置，永久生效：
  - 在vite.config.js中添加如下配置：
```
import dns from 'dns'
dns.setDefaultResultOrder('verbatim')
```
vite官方给到的解释如下：

配置以后再次启动，控制台输出如下：
- 还有一种也是修改配置的，同样是在vite.config.js文件中：
  
  这种方式还能指定启动的端口，个人更推荐这种。
  
  具体有关后端服务器的配置可以参考官方文档的解释 ➡️快速跳转
修改后段的配置，新增SpringMVC的配置

@Configuration
public class WebMvcConfg implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //设置允许跨域的路径
        registry.addMapping("/**")
                //设置允许跨域请求的域名
                //当**Credentials为true时，**Origin不能为星号，需为具体的ip地址【如果接口不带cookie,ip无需设成具体ip】
                .allowedOrigins("http://localhost:5173", "http://127.0.0.1:5173")
                //是否允许证书 不再默认开启
                .allowCredentials(true)
                //设置允许的方法
                .allowedMethods("*")
                //跨域允许时间
                .maxAge(3600);
    }
}

这种方式虽然前端不报错，但是！！！！ 这种方式Cookie设置不成功。起初我也以为是Googlel的SameSite的问题，但是我发现其他的浏览器后段通过request.getSession().getAttribute获取不到，根本没有值。如果你的Chrome也出现以下的信息，就很有可能是SameSite的问题。
在这里插入图片描述
至于什么是SameSite的，这里我也不过多阐述，这里也有一份解决方案。
➡️快速直达