跨域配置与两种解决方法

• 2020 年 12 月 23 日
• 筆記
• Nginx

跨域问题出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。

1 两种跨域解决方法

当web项目仅部署在Tomcat等服务器时，我们可以添加Java跨域配置；假设项目采用了Nginx，跨域任务可以交给Nginx。

1.1 Nginx跨域配置

完整的Nginx跨域配置示例

server {
    listen 3002;
    server_name localhost;

    location /hello {
    
        # 指定允许跨域的方法，*代表所有，也可设置具体方法。
        add_header Access-Control-Allow-Methods $http_access_control_request_method;
    
        # 预检命令的缓存，如果不缓存每次会发送两次请求
        add_header Access-Control-Max-Age 3600;
    
        # 带cookie请求需要加上这个字段，并设置为true
        add_header Access-Control-Allow-Credentials true;
    
        # 表示允许这个域跨域调用（客户端发送请求的域名和端口） 
        # $http_origin动态获取请求客户端请求的域 不用*的原因是带cookie的请求不支持*号
        add_header Access-Control-Allow-Origin $http_origin;
    
        # 表示请求头的字段 动态获取
        add_header Access-Control-Allow-Headers $http_access_control_request_headers;
    
        # OPTIONS预检命令，预检命令通过时才发送请求
        # 检查请求的类型是不是预检命令
        if ($request_method = OPTIONS){
            return 200;
        }
    }
}

1.2 SpringBoot 跨域配置注册

原理与nignx相同，修改请求信息。 本类作为一个bean装载到spring容器中。

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        // Cors配置
        CorsConfiguration config = new CorsConfiguration();
        // 1. 设置请求域名
        config.addAllowedOrigin("//localhost:8080"); // 本地ip
        config.addAllowedOrigin("//192.168.233.130:8080"); // 虚拟机
        config.addAllowedOrigin("//49.232.170.99"); // 外网ip
        config.addAllowedOrigin("*"); // 任意

        // 2. 设置允许的header
        config.addAllowedHeader("*");

        // 3. 设置允许请求的方法
        config.addAllowedMethod("*");

        // 4. 设置是否发送cookie
        config.setAllowCredentials(true);

        // 为URL添加路由
        UrlBasedCorsConfigurationSource corsSource = new UrlBasedCorsConfigurationSource();
        corsSource.registerCorsConfiguration("/**", config);

        return new CorsFilter(corsSource);
    }
}