Nodejs教程18：Ajax跨域

閱讀更多系列文章請訪問個人GitHub博客，示例代碼請訪問這裏。

Ajax跨域問題的產生緣由

Ajax請求沒法跨域，在前端開發中是個常見問題，它的產生緣由是，在瀏覽器接收服務端返回數據時，會檢查該數據是否和當前發起請求的網址在同一域名下。若不是，則會丟棄該數據，並返回一個跨域錯誤。

在Ajax請求中，遵循以下流程：

網頁提交一個Ajax請求到瀏覽器，瀏覽器將請求發至服務器，服務器接收到請求後，返回響應數據給瀏覽器（服務器一般不會對域名進行區分），瀏覽器接收到響應數據時，檢測返回數據的域名是否和當前頁面域名相同，若相同則將數據返回給網頁，不一樣則丟棄數據。

Ajax跨域的處理方法

既然跨域問題的產生緣由在於瀏覽器的限制，那麼網頁端在請求時沒法主動規避，此時就須要服務端進行處理。

服務端只須要在響應Ajax請求時，在請求頭中加入一個Access-Control-Allow-Origin屬性，並設置爲*（表示所有域名）或者當前域名就能夠讓瀏覽器再也不進行限制。

如下示例能夠經過/lesson18/ajax.html文件發起Ajax請求測試。

示例代碼：/lesson18/server.js

const http = require('http')

const server = http.createServer((req, res) => {
  console.log(req.headers.origin)
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.write(`{"resultCode": "0000", "msg": "success"}`)
  res.end()
})

server.listen(8080)
複製代碼

固然在實際項目中，不能夠簡單地設置res.setHeader('Access-Control-Allow-Origin', '*')，而是要經過req.headers.origin判斷髮起請求的域名是否合法，再設置Access-Control-Allow-Origin屬性，以避免出現安全問題。