如何解决浏览器跨域问题（前端解决浏览器跨域问题）

本篇笔记比较简单，主要介绍一下若依框架是如何处理跨域的。

首先简单介绍一下跨域这个概念。跨域是浏览器中的一种安全措施。浏览器会对网页中的js脚本中发起的请求进行检测，如果发起的请求和当前协议，端口，地址不同的话会进行限制，目的还是为了保证安全性。

前后端分离的框架中，前端服务器和后端服务器一般都是独立部署，一起部署的话至少也是不同端口，如果js中直接朝后台发起请求，那势必会造成跨域。

首先看一下后端代码中的配置：

在配置类ResourcesConfig中定义了一个corsFilter来和配合SpringSecurity使用，里面有很多关于跨域上面的配置，作者原始的配置没有对请求头和请求方法做任何的限制，不会对任何请求有跨域上的限制。

    @Bean
    public CorsFilter corsFilter()
    {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        // 设置访问源地址
        config.addAllowedOriginPattern("*");
        // 设置访问源请求头
        config.addAllowedHeader("*");
        // 设置访问源请求方法
        config.addAllowedMethod("*");
        // 有效期 1800秒
        config.setMaxAge(1800L);
        // 添加映射路径，拦截一切请求
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        // 返回新的CorsFilter
        return new CorsFilter(source);
    }

如果修改一下配置例如：config.addAllowedMethod("get"),这样子post请求的跨域请求就不被允许。这样的写法比用注解加在每个Restcontroller上面要来的方便，维护起来也更加容易。

其实在本地的开发环境中，前端项目里面配置了代理，类似与nginx一样，通过代理来转发请求，从而保持了协议，地址和端口的一致性，从而避免了跨域。

  devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },