nginx配置跨域問題

 No 'Access-Control-Allow-Origin' header is present on the requested resource

1.跨域指的是瀏覽器不能執行其它網站的腳本，它是由瀏覽器的同源策略造成的，是瀏覽器對JavaScript 施加的安全限制。

2.瀏覽器在執行腳本的時候，都會檢查這個腳本屬於哪個頁面，即檢查是否同源，只有同源的腳本才會被執行；而非同源的腳本在請求數據的時候，瀏覽器會報一個異常，提示拒絕訪問。

　　①、http://www.123.com/index.html 調用  http://www.123.com/welcome.jsp      協議、域名、端口號都相同，同源。

　　②、https://www.123.com/index.html 調用 http://www.123.com/welcome.jsp      協議不同，非同源。

　　③、http://www.123.com:8080/index.html 調用 http://www.123.com:8081/welcome.jsp   端口不同，非同源。

　　④、http://www.123.com/index.html 調用  http://www.456.com/welcome.jsp       域名不同，非同源。

　　⑤、http://localhost:8080/index.html 調用 http://127.0.0.1:8080/welcom.jsp        雖然localhost等同於 127.0.0.1 但是也是非同源的。

　　同源策略限制的情況：

　　1、Cookie、LocalStorage 和 IndexDB 無法讀取

　　2、DOM 和 Js對象無法獲得

　　3、AJAX 請求不能發送

3.解決跨域問題的nginx配置

#設置需要跨域的指定文件
location ^~/res/ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET,POST';
    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';
    alias /data/web/res/;
}    

#設置允許全局跨域
server {
　　 ....
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET,POST';
    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';  
}

 

4.代碼層面的跨域問題：

DOMException: Blocked a frame with origin "http://ip:7456" from accessing a cross-origin frame.

解決辦法：瀏覽器同源政策及其規避方法：https://www.techug.com/post/same-origin-policy.html