【SDU项目实训2019级】解决vue前后端分离使用ajax跨域问题 Access to XMLHttpRequest at ‘http://localhost:8081...

系统管理员 2023-09-29 10:37 11阅读 0赞

项目前后端分离，会报Access to XMLHttpRequest at ‘http://localhost:8081类似于这样的错误，我忘记截图了，就找了一张图

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5p2O5bCP5oGp5oGp5a2Q_size_20_color_FFFFFF_t_70_g_se_x_16][]

可以尝试从后端解决，在springboot项目文件src\\main\\java\\com\\example\\demo下新建一个config文件夹，加上CorsConfig类，类里面写：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5p2O5bCP5oGp5oGp5a2Q_size_13_color_FFFFFF_t_70_g_se_x_16][]

package com.example.demo.config;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.cors.CorsConfiguration;
    import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    import org.springframework.web.filter.CorsFilter;
    //解决前端跨域问题
    @Configuration
    public class CorsConfig {
        @Bean
        public CorsFilter corsFilter() {
            final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
            final CorsConfiguration corsConfiguration = new CorsConfiguration();
            /*是否允许请求带有验证信息*/
            corsConfiguration.setAllowCredentials(true);
            /*允许访问的客户端域名*/
            corsConfiguration.addAllowedOrigin("*");
            /*允许服务端访问的客户端请求头*/
            corsConfiguration.addAllowedHeader("*");
            /*允许访问的方法名,GET POST等*/
            corsConfiguration.addAllowedMethod("*");
            urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
            return new CorsFilter(urlBasedCorsConfigurationSource);
        }
    }

我前端代码没有更改。。。

具体可以看看这个，写的挺好

[(3条消息) 后端如何解决跨域问题\_CrazySnail\_x的博客-CSDN博客\_后端跨域][3_ _CrazySnail_x_-CSDN]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5p2O5bCP5oGp5oGp5a2Q_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2389a77cb9ca492a8508ac5123321e0e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5p2O5bCP5oGp5oGp5a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5p2O5bCP5oGp5oGp5a2Q_size_13_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/5281147477824c009864131775de83b8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5p2O5bCP5oGp5oGp5a2Q,size_13,color_FFFFFF,t_70,g_se,x_16
[3_ _CrazySnail_x_-CSDN]: https://blog.csdn.net/weixin_40910372/article/details/100068498