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应用程序能够迅速快速地以分布式的方式进行构建和扩展。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/160835.html