微信开发者工具测试前端网页跨域问题解决

微信开发者工具是为了帮助开发者更方便、更安全地开发和调试基于微信的网页，它是一个桌面应用，通过模拟微信客户端的表现，使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。可以根据自身需要下载。点击此处下载

有时候需要测的API只有手机上可以测试，如扫一扫

使用：先从官方下载客户端安装，安装地址可以选择除C盘外的其它盘，一路next即可。

运行软件选择公众号项目

在顶部放上页面的完整路径，回车即可打开页面

 使用该工具测试时，debug一定要打开，它会告诉我们哪里有错，附微信错误码大全；

当我们使用内网开发时，开发者工具会和浏览器一样报跨域，此时只需要关闭开发者工具，右击桌面快捷方式，选择属性，在目标的后面加上--disable-web-security --user-data-dir，一定要有空格不然保存不了。

 如此配置重新打开开发者工具会发现跨域没有了，但是不是真的跨域就不存在了，当我们把公众号菜单的URL改成前端页面地址的时候，虽然页面可以访问和查看，但是和后台还是跨域。所以解决跨域需要从根本出发。当时这个问题（手机扫一扫一直点着没反应，pc工具却正常）困扰了我很久，查了很多资料也没找到和我一样情况的，最后才意识到跨域从来就没有被解决过，而是被忽视了。

提供几种解决跨域问题的方案

1、某个接口需要跨域

在接口上方加@CrossOrigin注解，如下

2、某个类需要跨域

在类上方加@CrossOrigin注解，如下

 3、全局跨域---Filter实现

@Configuration
public class CORSWebFilter {
    @Bean
    public CorsFilter corsFilter(){
        CorsConfiguration config = new CorsConfiguration();
        // 允许跨域的头部信息
        config.addAllowedHeader("*");
        // 允许跨域的方法
        config.addAllowedMethod("*");
        // 可访问的外部域
        config.addAllowedOrigin("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        CorsFilter corsFilter = new CorsFilter(source);
        return corsFilter;
    }
}

4、全局跨域---WebMvcConfigurerAdapter实现

@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter { 
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                .maxAge(3600);
    }
}

第三、第四种需要将文件放在和controller同层的config中，我采用的是第三种、亲测有效。