跨域配置

springboot跨域配置

我们的后端使用spring boot。spring boot跨域非常简单，只需书写以下代码即可。

@configuration
public class customcorsconfiguration {
  private corsconfiguration buildconfig() {
    corsconfiguration corsconfiguration = new corsconfiguration();
    corsconfiguration.addallowedorigin("*");
    corsconfiguration.addallowedheader("*");
    corsconfiguration.addallowedmethod("*");
    return corsconfiguration;
  }
  @bean
  public corsfilter corsfilter() {
    urlbasedcorsconfigurationsource source = new urlbasedcorsconfigurationsource();
    source.registercorsconfiguration("/**", buildconfig());
    return new corsfilter(source);
  }
}

nginx跨域配置

某天，我们将spring boot应用用nginx反向代理。而前端跨域请求的需求不减，于是乎。

nginx跨域也比较简单，只需添加以下配置即可。

location / {
    proxy_pass http://localhost:8080;
    if ($request_method = 'options') {
        add_header 'access-control-allow-origin' '*';
        add_header 'access-control-allow-methods' 'get, post, options';
        add_header 'access-control-allow-headers' 'dnt,x-customheader,keep-alive,user-agent,x-requested-with,if-modified-since,cache-control,content-type,content-range,range,token';
        add_header 'access-control-max-age' 1728000;
        add_header 'content-type' 'text/plain; charset=utf-8';
        add_header 'content-length' 0;
        return 204;
    }
    if ($request_method = 'post') {
        add_header 'access-control-allow-origin' '*';
        add_header 'access-control-allow-methods' 'get, post, options';
        add_header 'access-control-allow-headers' 'dnt,x-customheader,keep-alive,user-agent,x-requested-with,if-modified-since,cache-control,content-type,content-range,range,token';
        add_header 'access-control-expose-headers' 'dnt,x-customheader,keep-alive,user-agent,x-requested-with,if-modified-since,cache-control,content-type,content-range,range,token';
    }
    if ($request_method = 'get') {
        add_header 'access-control-allow-origin' '*';
        add_header 'access-control-allow-methods' 'get, post, options';
        add_header 'access-control-allow-headers' 'dnt,x-customheader,keep-alive,user-agent,x-requested-with,if-modified-since,cache-control,content-type,content-range,range,token';
        add_header 'access-control-expose-headers' 'dnt,x-customheader,keep-alive,user-agent,x-requested-with,if-modified-since,cache-control,content-type,content-range,range,token';
    }
}

其中： add_header 'access-control-expose-headers' 务必加上你请求时所带的header。例如本例中的“token”，其实是前端传给后端过来的。如果记不得也没有关系，浏览器的调试器会有详细说明。

参考文档：https://enable-cors.org/server_nginx.html

b.t.w，阿里云中文档描述到nginx也可通过crossdomain.xml配置文件跨域：https://helpcdn.aliyun.com/knowledge_detail/41123.html ，不过笔者并未采用这种方式。

cors on nginx

the following nginx configuration enables cors, with support for preflight requests.

#
# wide-open cors config for nginx
#
location / {
     if ($request_method = 'options') {
        add_header 'access-control-allow-origin' '*';
        add_header 'access-control-allow-methods' 'get, post, options';
        #
        # custom headers and headers various browsers *should* be ok with but aren't
        #
        add_header 'access-control-allow-headers' 'dnt,x-customheader,keep-alive,user-agent,x-requested-with,if-modified-since,cache-control,content-type,content-range,range';
        #
        # tell client that this pre-flight info is valid for 20 days
        #
        add_header 'access-control-max-age' 1728000;
        add_header 'content-type' 'text/plain; charset=utf-8';
        add_header 'content-length' 0;
        return 204;
     }
     if ($request_method = 'post') {
        add_header 'access-control-allow-origin' '*';
        add_header 'access-control-allow-methods' 'get, post, options';
        add_header 'access-control-allow-headers' 'dnt,x-customheader,keep-alive,user-agent,x-requested-with,if-modified-since,cache-control,content-type,content-range,range';
        add_header 'access-control-expose-headers' 'dnt,x-customheader,keep-alive,user-agent,x-requested-with,if-modified-since,cache-control,content-type,content-range,range';
     }
     if ($request_method = 'get') {
        add_header 'access-control-allow-origin' '*';
        add_header 'access-control-allow-methods' 'get, post, options';
        add_header 'access-control-allow-headers' 'dnt,x-customheader,keep-alive,user-agent,x-requested-with,if-modified-since,cache-control,content-type,content-range,range';
        add_header 'access-control-expose-headers' 'dnt,x-customheader,keep-alive,user-agent,x-requested-with,if-modified-since,cache-control,content-type,content-range,range';
     }
}

浏览器设置跨域

chrome、firefox本身是可以通过配置支持跨域请求的。

• chrome跨域：参考文档：http://www.cnblogs.com/laden666666/p/5544572.html
  
• firefox跨域：参考文档：https://segmentfault.com/q/1010000002532581/a-1020000002533699