AJAX跨域 緣由&思路

跨域產生的緣由&問題

 

◆ 瀏覽器限制

跨域問題若是認爲是服務器後臺不容許前臺調用的想法是錯誤的,緣由是瀏覽器出於安全的考慮,當瀏覽器發現請求是跨域的時候,就會校驗,校驗不經過則拋出跨域安全的問題.(閒的慌)

 

◆ 跨域

若是請求不是本域的,就會發生跨域. 請求包含協議、域名、端口,其中任何一個不同,瀏覽器就認爲該請求是跨域的.

 

◆ XHR (XMLHttpRequest) 請求

若是請求(或封裝)不是XHR請求,就算是跨域,瀏覽器也不會報錯,請求方式有不少種,能夠查看瀏覽器控制檯請求窗口上請求的類型,若是是xhr,則會被校驗,若是是其餘的則不會校驗(好比img標籤上的請求)

 

解決思路

針對以上3點開始解決

1. 不讓瀏覽器作這些校驗,不限制,就不會有跨域安全問題(disable-web-security操做瀏覽器屬性配置,沒人會去幹的)

2. 那咱們發出去的請求type不是xhr也能夠,就算是跨域也不會報跨域問題(如: jsonp,type是script,只支持get請求,後端繼承AbstractJsonpResponseBodyAdvice類,重寫構造器約定便可)

3. 第一種被調用方改動,傳遞調用方容許信息,容許跨域訪問,直接由瀏覽器發送請求,則直接跨域;第二種調用方改動,使用代理,請求都發向另外一個域,在代理中轉url請求,瀏覽器認爲都是同一個域名的訪問,則隱藏跨域

 

關於nginx, 虛擬主機(多個域名指向同一個服務器,服務器將不一樣的域名轉到不一樣的應用服務器)

安裝好nginx,在conf目錄下,在nginx.conf文件最下方添加include vhost/*.conf

而後在conf目錄下新建一個名爲vhost的文件夾.進入vhost文件夾,開始創建相關的應用域名配置

如下是一個例子:

server{
  listen: 80;                           ---監聽端口
  server_name: tom.com;                 ---調用方,訪問時候的域名,測試時候須要在本身電腦上改host文件的對應配置
  
  location /{
    proxy_pass http://localhost:8080/;  ---被調用方,全部的請求都轉到這裏

    add_header Access-Control-Allow-Methods *;   ---將以前控制header的信息,轉移到nginx管理的方式
    add_header Access-Control-Max-Age 3600;
    add_header Access-Control-Allow-Credentials true;

    add_header Access-Control-Allow-Origin $http_origin;    ---動態獲取origin
    add_header Access-Control-Allow-Headers $http_access_control_allow_headers; ---小寫,-換成_

    if ($request_method = OPTIONS){   ---處理 options 預檢命令,不須要再轉到應用服務器,if和()之間必須帶空格
       return 200;
    }
  }

  location /otherserver{                    ---再次代理,隱藏跨域
    proxy_pass http://localhost:8081/jerry;
  }
}

寫完配置文件,內心沒底的話,能夠測試一下文件是否正確,命令: nginx.exe -t

 

關於Apache的,須要打開預留的註釋掉的功能,在httpd-vhost.conf文件,對應的節點修改添加什麼什麼的,

下次再試試好了,本次不玩了

 

spring框架項目,只要在類上或方法上加一個註解@CrossOrigin,就能夠了

----------------------------------------------------------------