你今天跨域了嗎？--CORS解決跨域

在使用瀏覽器發送請求的時候，常常會遇到跨域的問題，可是到如今也已經有了不少的解決方法。其中一個經典的方法就是跨域資源共享（Cross-Origin Resource Sharing）了，CORS使用額外的HTTP頭部高數瀏覽器可讓哪些地址進行跨域資源請求。

跨域產生的緣由

從字面意思來看，跨域就是跨域名，但它卻有更深一層的含義。事實上，只要協議、域名、端口有任何一個不一樣，都被視爲不一樣的域。若是沒有跨域，就能隨便引用外部文件，不一樣標籤下的頁面若是能相互引用，瀏覽器也會摸不着頭腦，安全上就得不到保障了。瀏覽器出於安全考慮限制跨域HTTP請求，這就是同源策略，因此後端須要設置請求頭才能容許跨域。

利用CORS解決跨域

CORS的基本思想就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是成功的仍是失敗的。目前，全部的瀏覽器都支持該功能，IE瀏覽器須要IE10及以上的版本。整個CORS通訊過程，都是由瀏覽器自動完成的，不須要用戶參與。因此開發者只須要在服務器中實現CORS接口，就能輕鬆解決跨域問題。

服務器端要想支持CORS，主要的配置是Access-Control-Allow-Origin，當瀏覽器檢測到響應的設置時，就會容許跨域的訪問。

http.createServer((req, res) => {
    //容許哪些客戶端來訪問
    res.setHeader('Access-Control-Allow-Origin',
    "http://127.0.0.1:5500")
複製代碼

在服務器端配置了這段代碼後，咱們就能容許本地的5500端口進行跨域訪問了。固然，咱們能夠經過更詳細的配置，來確保跨域通訊的安全。 以下：

const http = require('http')
http.createServer((req, res) => {
    //容許哪些客戶端來訪問
    res.setHeader('Access-Control-Allow-Origin',
    "http://127.0.0.1:5500")
    //容許能夠添加那些頭，而後來訪問
    res.setHeader('Access-Control-Allow-Headers',
    "token,xxx")
    //容許那些方法來訪問
    res.setHeader('Access-Control-Allow-Methods',
    "OPTIONS")
    //能夠每隔半小時，來發送一個option請求
    res.setHeader('Access-Control-Max-Age',
    '1800')
    if(req.method ==="options"){
        return res.end()
    }
    if (req.url == "/api") {
        res.end(JSON.stringify({ name: 'wangcai' }))
    }
}).listen(3000)
複製代碼

在html頁面中能夠作相應的配置

<script> fetch("http://localhost:3000/api", { method: 'GET', headers:{ token:'xxx' } }).then(res => { return res.json() }).then(json => { console.log(json) }) </script>
複製代碼

簡單的總結了一下CORS。對於先後端分離開發來講，跨域請求是咱們必須解決的問題，在面試中跨域問題的解決方法也是必需要掌握的，早期通常是使用JSONP來解決，可是JSONP有着較大的侷限性，只能實現GET請求，相比之下，COSR有着更大的靈活性，已經成爲如今解決跨域的主流方法，以上。。。