解決同源政策限制的三種方案

何爲同源政策

  如果兩個頁面擁有相同的協議、域名、端口，就是同源，有一個不同，就是不同源。由於同源政策，Ajax只能在同一個服務器中發送數據，無法向非同源地址發送Ajax請求。

  在不同源的頁面中發送請求，即是跨域。

產生原因

  同源政策是爲了保證用戶信息的安全，防止惡意的網站竊取數據。

可是在實際項目開發中，我們需要請求其他服務器上的接口，比如：調用騰訊天氣中的查詢未來7天的天氣接口，應該如何做呢？下面給出三種方式供大家參考：

JSONP—JSON with Padding

  JSONP利用的是script標籤中的src屬性，因爲src屬性是不受同源政策的影響的，比如：我們經常在HTML文件中引入jQuery：

使用方式：
  1.將不同源的服務器端請求地址寫在script標籤的src屬性中

<script src="非同源的服務器地址"></script>

  2.服務器端響應數據必須是一個函數的調用，真正要發送給客戶端的數據需要作爲函數調用的參數

app.get('/test', (req, res) => {
	const result = 'fn({name: "張三"})';
	res.send(result);
});

  3.在客戶端全局作用域下定義函數fn（函數需要定義在script標籤上，因爲用到了返回的數據fn）

  4.在fn函數內部對服務器返回的數據進行處理

function fn(data){
    console.log('客戶端的函數fn被調用了');
    console.log(data);            
}

CORS—Cross Origin Resource Sharing

  CORS即跨域資源共享，它允許瀏覽器向跨域服務器發送Ajax請求，克服了Ajax只能同源使用的限制。

  使用方式：客戶端不需要做改變，服務器端加上兩個響應頭即可

// 1.允許哪些客戶端訪問我 * 代表允許所有的客戶端訪問我
res.header('Access-Control-Allow-Origin', '*')
// 2.允許客戶端使用哪些請求方法訪問我
res.header('Access-Control-Allow-Methods', 'get, post')

服務器端的方案—"曲線救國"

  因爲服務器端不存在同源政策的限制，假設1號客戶端請求2號服務器端，可以採用1號服務器端訪問2號服務器端，然後把數據響應給1號客戶端，這樣就繞開了瀏覽器的同源政策的限制。

  1號服務器端訪問2號服務器端需要依賴三方模塊request：

  ①.安裝

npm install request

  ②.引入

const request = require('request');

  ③.在1號服務器端的請求中請求2號服務器端

request('2號服務器地址', (err, response, body) => {
	// body 是請求回來的數據
	res.send(body);
})

withCredentials屬性，運行請求攜帶cookie信息

  在使用Ajax技術發送跨域請求時，默認不會再請求中攜帶cookie信息，如果希望攜帶cookie信息，需要設置withCredentials屬性。

  1.客戶端配置Ajax對象攜帶cookie信息

xhr.withCredentials = true

  2.服務器端允許客戶端請求攜帶cookie

res.header('Access-Control-Allow-Credentials', 'true')