- 問題描述
最近在配置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' is therefore not allowed access
控制台會說訪問B服務器上的資源出現跨域問題,我們可以在nginx上配置跨域請求來解決問題。
- 指定可以跨域訪問的單網址
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版本依舊一樣,最終發現,是由於瀏覽器的緩存問題,清除掉瀏覽器緩存后,正常請求到跨域訪問的內容,希望遇到和為一樣問題的人,不妨試試該方法。