SpringSecurity解决跨域问题的方法

跨域问题产生原因

现在越来越多的项目都采用前后端分离的开发模式，以实现前后端代码解耦的目的。处于安全考虑，后端服务器对收到的请求进行了限制和区分，因此出现跨域访问不到数据的情况。

什么是跨域

当协议、域名、端口号，有一个或多个不同时，前端请求后端服务器接口的情况称为跨域访问。同源策略限制下cookie、localStorage、dom、ajax、IndexDB 都是不支持跨域的。 为什么 cookie、localStorage、dom、ajax、IndexDB 会受到同源策略限制，下面还有一点对跨域理解的误区： 误区： 同源策略限制下，访问不到后台服务器的数据，或访问到后台服务器的数据后没有返回； 正确： 同源策略限制下，可以访问到后台服务器的数据，后台服务器会正常返回数据，而被浏览器给拦截了。

解决跨域问题的两种方式

方式一（不推荐）

Ngnix介绍 Nginx是一个高性能的HTTP和反向代理服务器。其特点是占有内存少，并发能力强。

配置nginx.conf

1. 添加跨域相关配置，add_header开头的三行信息 其中，add_header Access-Control-Allow-Origin *或域名;
2. 前端发送http请求

getAllOnlineTasksData(){
        var _this = this
        _this.axios
              .get(http://localhost:8080+/api/interface/findAll,{})  //请求的是Nginx代理的地址
              .then(function (response) {
                   console.log("获取到的所有上线任务数据："+JSON.stringify(response.data))
                   //这个接口需要添加分页相关参数
                   _this.dataSource = response.data
       })
 },

方式二（推荐）

后端服务开启跨域请求设置（对于前端来说基本是透明的），我这里以SpringSecurity为例

1. 在Springboot项目中创建CorsConfig.java文件

package com.test.testmanagement.config.springsecurity;

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 {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //  你需要跨域的地址  注意这里的 127.0.0.1 != localhost
        
        // * 表示对所有的地址都可以访问
        corsConfiguration.addAllowedOrigin("*");
        // 表示只允许http://localhost:8080地址的访问（重点哦！！！！）
        // corsConfiguration.addAllowedOrigin("http://localhost:8080");
        
        //  跨域的请求头
        corsConfiguration.addAllowedHeader("*"); // 2
        //  跨域的请求方法
        corsConfiguration.addAllowedMethod("*"); // 3
        //加上了这一句，大致意思是可以携带 cookie
        //最终的结果是可以 在跨域请求的时候获取同一个 session
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;
    }
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        //配置 可以访问的地址
        source.registerCorsConfiguration("/**", buildConfig()); // 4
        return new CorsFilter(source);
    }
}