您的位置: 首页  >  文章  >  CORS解决跨域问题（Nginx跨域配置）

CORS解决跨域问题（Nginx跨域配置）

分类: 文章 • 2022-10-01 21:08:56

同域：域名（父域名和子域名都相同），端口，协议都相同

跨域：非同域的请求

 

问题：

浏览器上，我们访问127.0.0.1:80，但是127.0.0.1:80 会去请求127.0.0.1:81的数据（比如js文件，ajax请求等），此时80访问81会出现跨域问题，但我们浏览器能直接访问81的数据。

跨域不是请求发不出去，而是服务端正常返回结果后被浏览器拦截。浏览器会检查header里的origin信息，发现与请求的URL里的不一致，浏览器会报跨域错误。

CORS解决跨域问题（Nginx跨域配置）

 

解决办法：

跨域有2种请求，浏览器对于2种请求的处理不一样

简单请求：

请求方法只能是：HEAD，GET，POST

头信息不能超过以下字段：Accept,Accept-Language,Content-Language,Last-Event-ID,Content-Type(只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain)

非简单请求：不满足简单请求的2个条件

 

简单请求：

浏览器在头信息里增加一个Origin字段，表明本次请求的来源，服务器返回的信息里如果包含Access-Control-Allow-Origin且其值

包含Origin。

此外：

通过返回的Access-Control-Allow-Credentials匹配是否发送 cookie

通过返回的Access-Control-Allow-Methods匹配是否包含 请求方法

通过返回的Access-Control-Allow-Headers匹配是否包含 请求里设置的head属性

CORS解决跨域问题（Nginx跨域配置）

服务器在返回头信息里设置（必须）：

Access-Control-Allow-Origin: Origin       

Eg：Access-Control-Allow-Origin：127.0.0.1:80

如果想设置匹配所有的Origin且不带cookie的，可以设置：

Access-Control-Allow-Origin: *

如果需要带Cookie，需设置：

Access-Control-Allow-Credentials：true

如果想匹配所有的Origin且带cookie：

Access-Control-Allow-Credentials: true

Access-Control-Allow-Origin: 请求的Origin（从request获取后填入）

千万不能同时设置Credentials=true且Origin=*，浏览器会报错：

has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute

服务器其它可选设置：

Access-Control-Request-Method: *

Access-Control-Request-Headers: *  

例如服务器nginx配置案例：

add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Headers *;
add_header Access-Control-Allow-Methods *;

 

 

 

非简单请求：

常见的情况是请求方法是PUT  或者Content-Type字段类型是application/json 或者头信息里自定义了属性

过程：

此时浏览器将请求分成2步：预检+简单请求

预检请求：真正请求前增加一次预检（preflight）请求（请求方法是OPTIONS），用于判断，如果返回状态码是2XX表示验证通过

简单请求：预检通过后，发送真正请求到服务器。

注：

预检请求返回时，服务器可以额外配置Access-Control-Max-Age：xxx（单位秒），表示在此时间内请求不再发出另一条预检请求。

例如服务器nginx里配置跨域（针对OPTIONS请求直接返回2XX）：

location /file {
if ($request_method = 'OPTIONS') {
add_header Access-Control-Allow-Origin $http_origin;
        add_header Access-Control-Allow-Methods OPTIONS;
        add_header Access-Control-Allow-Credentials true;
        add_header Access-Control-Allow-Headers *;
        add_header Access-Control-Max-Age 1728000;
 return 204;
    }


 

 

nginx里完整的跨域配置：

     server {
         listen  80 default_server;
         server_name _;  

         add_header Access-Control-Allow-Credentials true;
         add_header Access-Control-Allow-Origin $http_origin;
         add_header Access-Control-Allow-Headers *;
         add_header Access-Control-Allow-Methods *;
                
         location /file {
            if ($request_method = 'OPTIONS') {
                add_header Access-Control-Allow-Origin $http_origin;
                add_header Access-Control-Allow-Methods OPTIONS;
                add_header Access-Control-Allow-Credentials true;
                add_header Access-Control-Allow-Headers *;
                add_header Access-Control-Max-Age 1728000;
                return 204;
             }         
        }

    }


 Spring里跨域配置： 

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true); //支持cookie 跨域
        config.setAllowedOrigins(Arrays.asList("*"));
        config.setAllowedHeaders(Arrays.asList("*"));
        config.setAllowedMethods(Arrays.asList("*"));
        config.setMaxAge(300L);//设置时间有效

        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

 

注：这里设置AllowCredentials为*没问题，是因为程序里做了处理（在CorsConfiguration类里）：

CORS解决跨域问题（Nginx跨域配置）

 

参考：http://www.ruanyifeng.com/blog/2016/04/cors.html

前端跨域测试：https://blog.csdn.net/qq_35720307/article/details/83616682

相关推荐