前端實現跨域的三種方式

1.什麼是跨域？

是瀏覽器的一種安全策略。當瀏覽器的某個頁面要訪問的服務器地址，跟該頁面的地址，存在協議，域名，端口號任一不相同時，瀏覽器視爲跨域訪問。

2.如何實現跨域？跨域的技術有哪些？

• 圖像ping
• jsonp跨域
• CORS（跨域資源共享）需要後端同志設置響應頭:Access-Control-Allow-Origin
• NGINX代理
• websocket協議跨域

3. 先看下jsonp跨域

• 首先是利用script標籤的src屬性來實現跨域。

• 通過將前端方法作爲參數傳遞到服務器端，遠程服務端通過調用指定的函數並傳入參數來實現傳遞參數，將fn(response)傳遞迴客戶端。
  如圖：
  

• 由於使用script標籤的src屬性，因此只支持get方法。

上面圖的實例如下：
前端代碼：

 function jsonp(req){
    var script = document.createElement('script');
    var url = req.url + '?callback=' + req.callback.name;
    script.src = url;
    document.getElementsByTagName('body')[0].appendChild(script);
  }
  function hello(res){
    console.log('hello1111 ' + res.data);
  }
  jsonp({
    url : 'http://localhost:3000/func',
    callback : hello
  });

後端服務器代碼：

app.get('/func', function (req, res) {
  if(req.query.callback){
    console.log(req.query.callback);
    var str = req.query.callback + '(' + JSON.stringify(data) + ')';
    res.end(str);
  } else {
    res.end();
  }
});

結果：