Cross-Origin Resource Sharing (CORS)的重要性及應用

一、CORS是什麼

CORS（Cross-Origin Resource Sharing）是W3C（World Wide Web Consortium）標準化、定義如何處理網頁的跨域資源訪問限制的協議。因為與同源策略相對，所以被稱為跨源資源共享。

一個域的文檔或腳本可以在不受限制的情況下向另一個域的資源發起任意數量的請求，並且響應還擁有一個一個被準確標識來源所允許的token。

二、同源策略相對CORS

同源策略是一個重要的安全特性，它限制了不同源（協議、域名或端口）之間的文檔間的交互，因為這種交互可能會導致同時訪問一個或多個域的文檔受到攻擊。同源策略是現代瀏覽器安全性的基石。但是，CORS是一種可用於允許跨越不同源的通信的機制。

三、CORS的作用

CORS允許Web服務器運行的應用程序，指示其允許跨域訪問所需的一組規則，從而與來自不同域的代碼相協調。CORS機制利用HTTP請求頭和響應頭來進行控制。

1、請求者的域必須被允許，必須存在於Access-Control-Allow-Origin響應頭中，否則請求將被阻止。

2、訪問控制請求方法必須與實際使用的方法一致，例如GET或POST，否則請求將被阻止。

3、訪問控制請求標頭（例如Access-Control-Allow-Headers）必須與實際使用的標頭一致，否則請求將被阻止。

4、如果請求包括身份驗證信息（例如cookies），則此Access-Control-Allow-Credentials響應頭必須為true，並且Access-Control-Allow-Origin響應頭不能為“*”，而是必須指定源（協議+域名+端口）。

四、CORS代碼示例

//服務器端Node.js代碼（Express.js）
const express = require('express')
const cors = require('cors')
const app = express()

app.use(cors({
  origin: '*'
}))

app.get('/', function (req, res) {
  res.send('Hello World!')
})

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

//客戶端javascript代碼
fetch("http://example.com/movies.json")
  .then(response => response.json())
  .then(data => console.log(data));

五、基於CORS的應用實例

1、基於CORS的跨域請求

如果一個Web應用程序要作為客戶端來跨域請求來自不同源的數據，則可以使用基於CORS的技術。這比JSONP和iframe模擬的傳統方式更穩定和更安全。前端JavaScript代碼將CORS-headers作為一部分的任何請求發送給目標，則服務器可響應以允許或阻止請求。

//服務器端Node.js代碼（Express.js）
const express = require('express')
const cors = require('cors')
const app = express()
const port = 3000

app.use(cors())

app.get('/products/:id', (req, res, next) => {
  res.json({msg: '這是跨域請求返回的數據'})
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

//客戶端javascript代碼
fetch('http://localhost:3000/products/12345')
  .then(response => response.json())
  .then(data => console.log(data))

2、使用CORS處理文件上傳

文件上傳是一個具有挑戰性的方案，特別是在實施跨域上傳時。可以使用基本的HTML5解決方法，但前提是服務器正在授權客戶端跨域上傳。服務器可以使用處理來自不同源的HTTP POST請求的CORS來支持跨域上傳。

//服務器端Node.js代碼（Express.js）
const formidable = require('formidable')
const express = require('express')
const cors = require('cors')

const app = express()

app.use(cors())

app.post('/upload', (req, res) => {
  const form = new formidable.IncomingForm()

  form.parse(req, (err, fields, files) => {
    res.json({msg: '這是跨域上傳返回的數據'})
  })
})

app.listen(3000, () => {
  console.log('Server listening on http://localhost:3000 ...')
})

//客戶端javascript代碼
const form = new FormData()
const fileInput = document.querySelector('#file-input')

form.append('filename', fileInput.files[0])

fetch('http://localhost:3000/upload', {
  method: 'POST',
  body: form
})
  .then(response => response.json())
  .then(data => console.log(data))

六、CORS的優缺點

1、優點：使用CORS允許Web應用程序與來自外部網絡的API進行交互，而不影響同源政策的安全性。

2、缺點：由於客戶端需要通過響應請求來檢查CORS header，因此可能會在跨源請求中花費更多的網絡傳輸時間。

七、總結

CORS是一種用於Web應用程序的資源共享機制，是安全可靠的。CORS用戶可以從其他域發送Ajax請求並獲得相應的響應，這樣可以使得Web應用程序能夠迅速快速地以分布式的方式進行構建和擴展。