前端跨域之nginx配置跨域問題

 

一、前端跨域問題

　　前端跨域出現在前端得同源策略上，只有滿足：協議、域名、端口相同得情況下才是同源，即可以調用對方資源，否則，瀏覽器端，F12的console會報錯：Access_Control_Allow_Origin的問題；

前端地址:http://www.baidu.com	是否跨域	原因
http://www.baidu.com/home	否	域名、協議、端口都相同
https://www.baidu.com/home	是	協議不同
http://www.jd.com/	是	域名不同
https://www.jd.com	是	協議、域名都不同

 

 

 

 

 

 

 

 

二、跨域解決的方法

　  1、后端授權：CORS;

　　2、jsonp：利用html標簽的中src等不受同源策略影響的漏洞

　　3、nginx代理配置；

三 、利用nginx配置，解決前端跨域問題

　　

//打開nginx的配置文件
vim nginx.conf 
//在指定的代理位置進行設置如下代碼 location ^/home { add_headeer ‘Access_Control_Allow_Origin’ ’*.huawei.com‘  //控制的域名范圍
        add_header 'Access_Control_Allow_Credentials' 'true' add_headeer ‘Access_Control_Allow_Method’ ’GET，POST，PUT，DELETE，HEAD，OPTIONS‘ //控制的請求方法
}        

【注釋：Access_Control_Allow_Origin      這些請求信息，首字符是否大寫，要根據F12中的報錯提示，前端報錯是小寫，在配置過程中，就用小寫字母】

 

  配置完成之后，在瀏覽器的ResponseHeader中會有Access_Control_Allow_Origin頭部信息

 

四、nginx 配置手動清除緩存

location ~ /purge(/.*) {
allow 127.0.0.1;
allow 192.168.50.0/24;
deny all;
proxy_cache_purge whsir_com $host$1$is_args$args;
}

接下來我們來清除緩存，只需要在清除緩存網頁的URI地址前加上purge即可

http://192.168.50.101/purge/