• 問題描述

最近在配置nginx跨域問題上折騰了很長時間。網址開發通常將動態資源與靜態資源分開，在A的伺服器上需要去載入B伺服器上的靜態資源時通常就會遇到跨域的問題，如下載入字型靜態檔案

Access to Font at 'http://bbb.cn/biz/fonts/iconfont.woff' from origin 'http://aaa.cn' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://aaa.cn

• 指定可以跨域訪問的單網址

	server {

		listen 80;
		server_name https://bbb.cn;
		location /biz/fonts/ {
			add_header Access-Control-Allow-Origin http://aaa.cn;
			add_header Access-Control-Allow-Credentials true;
			add_header Access-Control-Allow-Methods GET;
		}
	}

 

• 任何網址都可以跨域訪問（為了安全通常不這麼配置）

	server {

		listen 80;
		server_name https://bbb.cn;
		location /biz/fonts/ {
			add_header Access-Control-Allow-Origin * ;
			add_header Access-Control-Allow-Credentials true;
			add_header Access-Control-Allow-Methods 'GET,POST,OPTIONS';
		}
	}

• 允許多個網址跨域訪問(配置一個map)

	map $http_origin $origin_list{
		default http://aaa.cn;
		"~http://ccc.cn" http://ccc.cn;
		"~http://ddd.cn" http://ddd.cn;
	}
	server {

		listen 80;
		server_name https://bbb.cn;
		location /biz/fonts/ {
			add_header Access-Control-Allow-Origin "$origin_list" ;
			add_header Access-Control-Allow-Credentials true;
			add_header Access-Control-Allow-Methods 'GET,POST,OPTIONS';
		}
	}

 

• 踩坑記錄
  
  在我配置好上述內容後，在瀏覽器訪問時，依舊出現了跨域訪問的問題，我一開始在網上瘋狂搜索相關問題，修改了很多中配置方法，依舊無效。很是絕望，我甚至懷疑過時版本問題，更換了nginx版本依舊一樣，最終發現，是由於瀏覽器的快取問題，清除掉瀏覽器快取後，正常請求到跨域訪問的內容，希望遇到和為一樣問題的人，不妨試試該方法。