跨源資源分享 (CORS)

發表於 | 更新於 | 分類於

跨源資源分享 （Cross-Origin Resource Sharing (CORS)）是一種使用額外 HTTP標頭令目前瀏覽網站的用戶代理取得訪問其他來源（網域）伺服器特定資源權限的機制。當用戶代理請求一個不是目前文件來源——例如來自於不同網域（domain）、通訊協定（protocol）或通訊埠（port）的資源時，會建立一個跨來源 HTTP 請求（cross-origin HTTP request）。 出處MDN

簡化意思就是在 a.com 中用Ajax 去Get b.com 的資料的時候，會造成的CORS的問題。只需要添加一個表頭就可以允許 a.com 的請求。

允許來自 a.com 的請求
Access-Control-Allow-Origin: a.com

允許任何網域的請求
Access-Control-Allow-Origin: *

目前只寫過node.js 以及 C# 的方式，但是各語言應該都大同小異，畢竟這只是加入表頭而已，另外也可以設定限制的請求。
Access-Control-Allow-Methods: GET

1
2
3
4
5
//C# - aspx
response.AddHeader("Access-Control-Allow-Origin", "*");

//C# - ashx
context.Response.AddHeader("Access-Control-Allow-Origin", "*");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//Nodejs - Simple Usage (Enable All CORS Requests)
/* https://github.com/expressjs/cors#simple-usage-enable-all-cors-requests */
var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.get('/products/:id', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

// OR
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.get('/', function(req, res, next) {
  // ...
});

app.post('/', function(req, res, next) {
 // ...
});

參考來源
How to implement “Access-Control-Allow-Origin” header in asp.net
expressjs - cors

0%