最近在用node.js寫自己的后台時遇見了跨域問題,之前處理跨域都是在前端配置代理解決的,這次打算在后台解決,中途也遇
到了一些坑,比如我在請求頭里加了一個自定義的參數token,結果后台配置的時候沒有允許請求能夠攜帶該參數,造成預檢請求
發出后,就沒任何響應了。為此折騰了半天才發現問題。。。還是對它不夠了解,所以查閱了相關資料,下面做出自己的理解:
都知道跨域是因為瀏覽器的同源策略造成的,當客戶端訪問服務端時,如果兩端的ip、端口、協議任意一個不同就會產生跨域。
下面介紹node.js后台如何配置允許跨域訪問:
如果產生了跨域,客服端在訪問服務端時,除了get請求外,其它請求都會先向客戶端發送一個為 OPTIONS 的預檢請求(預請求),
該請求到達服務端后,服務端會判斷是否允許該請求繼續訪問,下面貼出我在node.js中如何配置的跨域中間件:
我是用的是express框架,在app.js中配置允許跨域(把這段代碼放在你的其它中間件之前,如果對您有幫助請幫我點個贊喔(* ̄︶ ̄) ):
// 配置跨域請求中間件(服務端允許跨域請求) var allowCors = function(req, res, next) { res.header("Access-Control-Allow-Origin", req.headers.origin); // 設置允許來自哪里的跨域請求訪問(req.headers.origin為當前訪問來源的域名與端口) res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS"); // 設置允許接收的請求類型 res.header("Access-Control-Allow-Headers", "Content-Type,request-origin"); // 設置請求頭中允許攜帶的參數 res.header("Access-Control-Allow-Credentials", "true"); // 允許客戶端攜帶證書式訪問。保持跨域請求中的Cookie。注意:此處設true時,Access-Control-Allow-Origin的值不能為 '*' res.header("Access-control-max-age", 1000); // 設置請求通過預檢后多少時間內不再檢驗,減少預請求發送次數 next(); }; app.use(allowCors); // 使用跨域中間件