跨域請求問題cors

什麼是跨域？

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

所謂同源是指，域名，協議，端口均相同，不明白沒關係，舉個例子：

http://www.123.com/index.html 調用 http://www.123.com/server.php （非跨域）

http://www.123.com/index.html 調用 http://www.456.com/server.php （主域名不同:123/456，跨域）

http://abc.123.com/index.html 調用 http://def.123.com/server.php （子域名不同:abc/def，跨域）

http://www.123.com:8080/index.html 調用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）

http://www.123.com/index.html 調用 https://www.123.com/server.php （協議不同:http/https，跨域）

請注意：localhost和127.0.0.1雖然都指向本機，但也屬於跨域。

瀏覽器執行javascript腳本時，會檢查這個腳本屬於哪個頁面，如果不是同源頁面，就不會被執行。

解決辦法：

1、JSONP：

使用方式就不贅述了，但是要注意JSONP只支持GET請求，不支持POST請求。

2、代理：

例如www.123.com/index.html需要調用www.456.com/server.php，可以寫一個接口www.123.com/server.php，由這個接口在後端去調用www.456.com/server.php並拿到返回值，然後再返回給index.html，這就是一個代理的模式。相當於繞過了瀏覽器端，自然就不存在跨域問題。

3、PHP端修改header（XHR2方式）

在php接口腳本中加入以下兩句即可：

header('Access-Control-Allow-Origin:*');//允許所有來源訪問

header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式

跨域資源共享（ CORS ）機制允許 Web 應用服務器進行跨域訪問控制，從而使跨域數據傳輸得以安全進行。

某些請求不會觸發 CORS 預檢請求。本文稱這樣的請求爲“簡單請求”，請注意，該術語並不屬於 Fetch （其中定義了 CORS）規範。若請求滿足所有下述條件，則該請求可視爲“簡單請求”：

• 使用下列方法之一：
  • GET
  • HEAD
  • POST
• Fetch 規範定義了對 CORS 安全的首部字段集合，不得人爲設置該集合之外的其他首部字段。該集合爲：
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type （需要注意額外的限制）
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width
• Content-Type 的值僅限於下列三者之一：
  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded

比如說，假如站點 http://foo.example 的網頁應用想要訪問 http://bar.other 的資源。http://foo.example 的網頁中可能包含類似於下面的 JavaScript 代碼：

var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/public-data/';
   
function callOtherDomain() {
  if(invocation) {    
    invocation.open('GET', url, true);
    invocation.onreadystatechange = handler;
    invocation.send(); 
  }
}

客戶端和服務器之間使用 CORS 首部字段來處理跨域權限：

GET /resources/public-data/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
Origin: http://foo.example


HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2.0.61 
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

可以看出如果是跨域請求，請求頭會帶有一個

Origin: http://foo.example

顯示請求的原地址,如果後臺沒有使用cors兼容，就不能訪問，允許跨域訪問的代碼

@WebFilter(urlPatterns = {"/*"}, asyncSupported = true, filterName = "2",
        initParams = {
                //使用org.ebaysf.web.cors.CORSFilter的cors-filter的配置方式
                //@WebInitParam(name="CORS Filter",value = "org.ebaysf.web.cors.CORSFilter"),
                @WebInitParam(name = "cors.allowed.origins", value = "*"),
                @WebInitParam(name = "cors.allowed.methods", value = "GET,POST,HEAD,OPTIONS,PUT,DELETE,CONNECT,OPTIONS"),
                @WebInitParam(name = "cors.allowed.headers", value = "token,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers"),
                @WebInitParam(name = "cors.support.credentials", value = "true"),
                @WebInitParam(name = "cors.exposed.headers", value = "")

        })

可以看到

@WebInitParam(name = "cors.allowed.origins", value = "*")

這個是允許所有訪問地址訪問