瀏覽器跨域等問題

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.