浏览器跨域等问题

cors

有时候，当在一个页面通过XHR方式访问另一个域名的资源时，浏览器会报CORS跨域错误。（通过新的浏览器tab页打开其它域名的资源，不会有问题），错误如：

Access to XMLHttpRequest at 'http://{ip}:{port}/xxx.png' from origin 'http://59.55.125.161:8992' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

要解决该问题，在需要跨域访问的服务器上配置：

server {
    listen       8819;
    server_name  localhost;
    
    #charset koi8-r;
    #access_log  logs/host.access.log  main;

    # 解决跨域问题 start
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    add_header Access-Control-Expose-Headers 'Content-Disposition';
    
    if ($request_method = 'OPTIONS') {
        return 204;
    }
    # 解决跨域问题 end
    
    ...
}

或者web.xml中配置：

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

注意，这个配置是在需要被跨域访问的服务端设置，不要搞错了服务器。比如A服务器上的web应用，需要跨域访问B服务器上的资源。这个时候，在B服务器上配置，而不是A服务器上。
这也导致了该种方式的局限性，即需要有权限更改B服务器。而实际环境中，B服务器一般是三方的，我们没有权限修改。

问题

Refused to get unsafe header "Content-Disposition"

nginx配置加上add_header Access-Control-Expose-Headers 'Content-Disposition';

Refused to display 'http://{otherDomainSiteUrl}:{... in a frame because it set 'X-Frame-Options' to 'sameorigin'.

A服务器访问其它域名B的资源时，如果报这个错误。则B服务器nginx上做如下配置：

add_header X-Frame-Options 'ALLOW-FROM http://{ip}:{port}';

这里的{ip}:{port}为A服务器的IP和端口。

add_header X-Frame-Options 可以设置的值有：ALLOWALL/SAMEORIGIN/DENY

设置完之后，如果报：

Refused to display 'http://10.180.221.159:7078/' in a frame because it set multiple 'X-Frame-Options' headers with conflicting values ('SAMEORIGIN, ALLOWALL'). Falling back to 'deny'.

这个表示设置的X-Frame-Options冲突了。比如B项目采用spring框架，spring security本身设置了X-Frame-Options为SAMEORIGIN。
可以通过如下方式解决，在B服务器的nginx上设置：

proxy_hide_header X-Frame-Options;
add_header X-Frame-Options ALLOWALL;

如下错误同理：

has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:8080, *', but only one is allowed.