CORS（cross-origin resourse sharing)跨域資源共享

今天從同源策略出發(fā)，探究跨域問(wèn)題出現(xiàn)的原因及其原理，以及一些常見(jiàn)解決方法。這篇文章主要講跨域解決辦法1.CORS（cross-origin resourse sharing)跨域資源共享。

同源策略

所謂同源，就是比較兩個(gè)頁(yè)面的協(xié)議、域名、端口是否相同，相同則是同源，有一個(gè)不同就視為不同源。

根據(jù)MDN給出的例子： 下表給出了相對(duì) http://store.company.com/dir/page.html 同源檢測(cè)的示例:

URL	結(jié)果	原因
store.company.com/dir2/other.…	成功
store.company.com/dir/inner/a…	成功	單元格
store.company.com/secure.html	失敗	不同協(xié)議 ( https和http )
store.company.com:81/dir/etc.htm…	失敗	不同端口 ( 81和80)
news.company.com/dir/other.h…	失敗	不同域名 ( news和store )

跨域問(wèn)題

瀏覽器為了保證信息安全，規(guī)定了資源訪問(wèn)使用同源策略。所以，當(dāng)瀏覽器訪問(wèn)的資源來(lái)自不同源，就會(huì)出現(xiàn)跨源資源訪問(wèn)，即跨域問(wèn)題。

解決方法

CORS（cross-origin resourse sharing)跨域資源共享

CORS是瀏覽器解決跨域問(wèn)題的一種策略，在CORS中，瀏覽器把a(bǔ)jax發(fā)起的請(qǐng)求分為簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求，分別對(duì)兩種請(qǐng)求進(jìn)行處理，再將ajax請(qǐng)求發(fā)往服務(wù)器。

①簡(jiǎn)單請(qǐng)求就是滿(mǎn)足以下條件的： 請(qǐng)求方式為這幾種：

GET,POST,HEAD

HTTP頭信息不超出以下幾種：

Accept
Accept-Language
Content-Language
Last-Event-ID
content-type只限于三種：text/plain，multipart/form-data，application/x-www-form-urlencoded

對(duì)于簡(jiǎn)單請(qǐng)求，瀏覽器直接發(fā)出CORS請(qǐng)求，在頭信息中增加一個(gè)字段：Origin,表示請(qǐng)求源域名。

例子：

Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.8
Connection:keep-alive
Host:localhost:3001
Origin:http://localhost:3000

Origin:http://localhost:3000 字段告訴服務(wù)器請(qǐng)求源是 http://localhost:3000，服務(wù)器就可以做出相應(yīng)響應(yīng)。

如果服務(wù)器發(fā)現(xiàn)Oringin字段的源不在接受范圍，就會(huì)發(fā)送一個(gè)正常HTTP回應(yīng)，瀏覽器發(fā)現(xiàn)這個(gè)回應(yīng)的頭信息中沒(méi)有包含Accsess-Control-Allow-Origin字段，就拋出一個(gè)錯(cuò)誤，被XMLHttpRequest的onerror捕獲，即跨域問(wèn)題出現(xiàn)了。

好了，知道報(bào)錯(cuò)原因，我們就可以從以下方法解決跨域問(wèn)題了： 概括為一句話：在服務(wù)器設(shè)置接受的源信息。

實(shí)例 客戶(hù)端請(qǐng)求：

var xhr = new XMLHttpRequest();
var url = 'http://localhost:3000';
xhr.open('GET',url);
xhr.send(null);
xhr.onreadystatechange = () => {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { // 如果請(qǐng)求成功
      text.innerHTML = xhr.response;
  }
}

服務(wù)器設(shè)置（例子用的express）：

var express = require('express');
var test = express();
test.get('/',(req,res) => {
  res.set('Access-Control-Allow-Origin','http://localhost:3000');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT');
  res.header('Access-Control-Allow-Headers', 'X-Custom-Header');
  res.header('Access-Control-Allow-Credentials', 'true');
  res.send("hello CORS.");
})

如上，服務(wù)器對(duì)請(qǐng)求的頭信息進(jìn)行設(shè)置， Access-Control-Allow-Origin字段表示接受的源，表示接受來(lái)自 http://localhost:3000 這個(gè)域名的請(qǐng)求。設(shè)置為*表示接受任意域名的請(qǐng)求。

Access-Control-Allow-Methods列舉出服務(wù)器接受的請(qǐng)求方式。 Access-Control-Allow-Headers可以設(shè)置允許請(qǐng)求源的header特殊參數(shù)。 Access-Control-Allow-Credentials該字段可選。它的值是一個(gè)布爾值，表示是否允許發(fā)送Cookie。

如此，就可以實(shí)現(xiàn)跨域訪問(wèn)了。

非簡(jiǎn)單請(qǐng)求 非簡(jiǎn)單請(qǐng)求，我的理解是排除了以上簡(jiǎn)單請(qǐng)求的，比如PUT請(qǐng)求。

瀏覽器對(duì)于非簡(jiǎn)單請(qǐng)求，在發(fā)送正式請(qǐng)求前，會(huì)先發(fā)送一個(gè)OPTION請(qǐng)求，向服務(wù)器詢(xún)問(wèn)是否接受請(qǐng)求，稱(chēng)為“預(yù)檢”請(qǐng)求。 如果服務(wù)器接受才會(huì)發(fā)送正式請(qǐng)求，否則就報(bào)錯(cuò)。 與簡(jiǎn)單請(qǐng)求一樣，服務(wù)器無(wú)非也就是判斷請(qǐng)求的域名、頭信息和HTTP動(dòng)詞等是否在允許范圍。 實(shí)例： 客戶(hù)端發(fā)送PUT請(qǐng)求：

var xhr = new XMLHttpRequest();
var url = 'http://localhost:3000';
xhr.open('PUT',url);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();
xhr.onreadystatechange = () => {
  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    text1.innerHTML = xhr.response;
  }
}

非簡(jiǎn)單請(qǐng)求例子中，我設(shè)置了特殊頭信息“X-Custom-Header”，告知服務(wù)器接受這個(gè)參數(shù)信息。

在服務(wù)器設(shè)置接受信息：

var express = require('express');
var test = express();
var responsePort = 3001;//服務(wù)器端口
test.all('*', (req, res) => {
  res.set('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT');
  res.header('Access-Control-Allow-Headers', 'X-Custom-Header');
  res.header('Access-Control-Allow-Credentials', 'true');
  res.send("hello CORS.");
})

至此，對(duì)于兩種請(qǐng)求方式，都可以實(shí)現(xiàn)跨域訪問(wèn)了。 其他解決方法參看如下：

1.CORS（cross-origin resourse sharing)跨域資源共享

2.JSONP

3.document.domain + iframe

4.window.name + iframe

5.postMessage

6.proxy

以上就是CORS cross-origin resourse sharing跨域資源共享解決的詳細(xì)內(nèi)容，更多關(guān)于CORS 跨域資源共享的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論