关于跨域问题的结局方案

跨域问题是浏览器为了保护用户的信息安全，实施了同源策略，就是允许页面请求同源的资源。

解决跨域问题方案

跨域问题可以从以下方面解决：

1.Spring Boot项目中解决

2.Nginx反向代理决绝

1.Spring Boot 中解决跨域

1.使用@CrossOrgin注解实现（局域类跨域）

2.通过配置文件实现（全局类跨域）

3.通过CorsFilter对象实现跨域（全局跨域）

1.1通过注解实现解决跨域

使用@CrossOrgin注解可以轻松实现跨域问题，次注解可以修饰类，修饰类时，类中所有方法都可以跨域。也可以修饰方法，修饰方法时，表示此方法可以实现跨域。代码如下：

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
@RestController
@CrossOrigin(origins = "*")
public class TestController {
    @RequestMapping("/test")
    public HashMap<String, Object> test() {
        return new HashMap<String, Object>() {{
            put("state", 200);
            put("data", "success");
            put("msg", "");
        }};
    }
}

这个方法虽然简单，但是如果当一个项目中存在多个类的话，使用此方法就会比较麻烦。

1.2通过文件解决跨域

• 创建一个新类
• 添加@Configuration注解，实现WebMvcConfigurer接口
• 重写addCorsMappings方法，设置允许跨域的代码

代码如下

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration // 一定不要忽略此注解
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 所有接口
        .allowCredentials(true) // 是否发送 Cookie
        .allowedOriginPatterns("*") // 支持域
        .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"}) // 支持方法
        .allowedHeaders("*")
        .exposedHeaders("*");
    }
}

1.3通过CorsFilter跨域

此方式和上一种方式类似，可以实现全局跨域，具体代码：

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 MyCorsFilter {
    @Bean
    public CorsFilter corsFilter() {
        // 1.创建 CORS 配置对象
        CorsConfiguration config = new CorsConfiguration();
        // 支持域
        config.addAllowedOriginPattern("*");
        // 是否发送 Cookie
        config.setAllowCredentials(true);
        // 支持请求方式
        config.addAllowedMethod("*");
        // 允许的原始请求头部信息
        config.addAllowedHeader("*");
        // 暴露的头部信息
        config.addExposedHeader("*");
        // 2.添加地址映射
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**", config);
        // 3.返回 CorsFilter 对象
        return new CorsFilter(corsConfigurationSource);
    }
}

2.通过Nginx解决跨域

在Nginx服务器的配置文件中添加代码：

server {
    listen       80;
    server_name  your_domain.com;
    location /api {
        # 允许跨域请求的域名，* 表示允许所有域名访问
        add_header 'Access-Control-Allow-Origin' '*';

        # 允许跨域请求的方法
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

        # 允许跨域请求的自定义 Header
        add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept';

        # 允许跨域请求的 Credential
        add_header 'Access-Control-Allow-Credentials' 'true';

        # 预检请求的存活时间，即 Options 请求的响应缓存时间
        add_header 'Access-Control-Max-Age' 3600;

        # 处理预检请求
        if ($request_method = 'OPTIONS') {
            return 204;
        }
    }
    # 其他配置...
}