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

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

前端成功启动后的界面：

然后在后端进行的Controller上使用了如下的配置

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

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

解决方案：

1. 修改vite的地址改为localhost

   1. 直接用localhost访问。
      
      这里有说使用host暴露，所以我就尝试了一下，果然没有再报错了。
   2. 改配置，永久生效：
      • 在vite.config.js中添加如下配置：

   import dns from 'dns'
   dns.setDefaultResultOrder('verbatim')
   

   vite官方给到的解释如下：
   
   配置以后再次启动，控制台输出如下：
   

   • 还有一种也是修改配置的，同样是在vite.config.js文件中：
     
     这种方式还能指定启动的端口，个人更推荐这种。

     具体有关后端服务器的配置可以参考官方文档的解释 ➡️快速跳转

2. 修改后段的配置，新增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的，这里我也不过多阐述，这里也有一份解决方案。
➡️快速直达