中文字幕无码无码专区,亚洲专区+欧美专区+自拍

腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

借助node實(shí)戰(zhàn)JSONP跨域?qū)嵗?/h1>

更新時(shí)間：2017年03月30日 11:04:47 作者：猴子猿

本篇文章主要介紹了借助node實(shí)戰(zhàn)JSONP跨域?qū)嵗?，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

一、前言：

瀏覽器安全是基于同源策略的。所謂同源策略就是三相同：

1、協(xié)議相同；

2、域名相同；

3、端口相同。

但，凡事都是有利弊，同源策略也導(dǎo)致了我們想用AJAX跨域請(qǐng)求，但NO??！為了規(guī)避這種限制，其中有一方法就是JSONP。

JSONP的基本思想：就是通過<script>的src，向服務(wù)器請(qǐng)求數(shù)據(jù)，且這不受同源策略限制（img和iframe的src也是如此）；然后服務(wù)器將相應(yīng)的數(shù)據(jù)放入指定的函數(shù)回調(diào)名中，返回給前端。

這，就實(shí)現(xiàn)了跨域請(qǐng)求信息。

如下圖所示：

了解了JSONP的大體思路，接下來(lái)，我們借助node來(lái)搭建一個(gè)簡(jiǎn)單的服務(wù)器，與前端一步步實(shí)現(xiàn)JSONP帶來(lái)的跨域請(qǐng)求之旅吧。

二、搭建node server：

因?yàn)榍岸艘獙?shí)現(xiàn)跨域請(qǐng)求，需要與后臺(tái)配合。在這里，我們使用是node來(lái)模擬后臺(tái)服務(wù)器。

So，你得對(duì)node有一定認(rèn)識(shí)以及開發(fā)環(huán)境。

接下來(lái)，我們就編寫一個(gè)簡(jiǎn)單的node服務(wù)器吧。

首先，我們需要引入http模塊，因?yàn)槭腔趆ttp請(qǐng)求的嘛。然后就是用其創(chuàng)建一個(gè)http服務(wù)器，如監(jiān)聽的是8080端口。

如下：

'use strict';
//通過require將http庫(kù)包含到程序中
var http = require('http');
//創(chuàng)建新的HTTP服務(wù)器
var server = http.createServer();
//通過request事件來(lái)響應(yīng)request請(qǐng)求
server.on('request',function(req, res){
  res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
  res.end('Hell World\n');  
});
//監(jiān)聽8080端口
server.listen('8080');
//用于提示我們服務(wù)器啟動(dòng)成功
console.log('Server running!');

接著，因?yàn)槲覀円獙?duì)使用JSONP的請(qǐng)求與正常請(qǐng)求區(qū)分，所以，后臺(tái)得判斷處理—通過解析url字符串，假設(shè)這里我們是通過帶有'/jsonp'的路徑名來(lái)判斷。

如下：

'use strict';
//通過require將http庫(kù)包含到程序中
var http = require('http');
//引入url模塊解析url字符串
var url = require('url');
//創(chuàng)建新的HTTP服務(wù)器
var server = http.createServer();
//通過request事件來(lái)響應(yīng)request請(qǐng)求
server.on('request',function(req, res){
  var urlPath = url.parse(req.url).pathname;
  //如果urlPath為'jsonp'，就認(rèn)定該請(qǐng)求為攜帶jsonp方法的http請(qǐng)求
  if(urlPath === '/jsonp'){
    res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});
    var data = {
      "name": "Monkey"
    };
    data = JSON.stringify(data);
    //假設(shè)我們定義的回調(diào)函數(shù)名為test
    var callback = 'test'+'('+data+');';
    res.end(callback);
  }
  else{
    res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
    res.end('Hell World\n');  
  }  
});
//監(jiān)聽8080端口
server.listen('8080');
//用于提示我們服務(wù)器啟動(dòng)成功
console.log('Server running!');

在上面的代碼中19行，有個(gè)缺點(diǎn)就是，我們將回調(diào)函數(shù)的名字規(guī)定死了，當(dāng)我們判斷請(qǐng)求為JSONP時(shí)，只能往前端傳入test，這樣顯然不合理。

所以，我們得借助于querystring 這個(gè)模塊，來(lái)處理query字符串。

如下：

'use strict';
//通過require將http庫(kù)包含到程序中
var http = require('http');
//引入url模塊解析url字符串
var url = require('url');
//引入querystring模塊處理query字符串
var querystring = require('querystring');
//創(chuàng)建新的HTTP服務(wù)器
var server = http.createServer();
//通過request事件來(lái)響應(yīng)request請(qǐng)求
server.on('request',function(req, res){
  var urlPath = url.parse(req.url).pathname;
  var qs = querystring.parse(req.url.split('?')[1]);
  if(urlPath === '/jsonp' && qs.callback){
    res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});
    var data = {
      "name": "Monkey"
    };
    data = JSON.stringify(data);
    var callback = qs.callback+'('+data+');';
    res.end(callback);
  }
  else{
    res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
    res.end('Hell World\n');  
  }  
});
//監(jiān)聽8080端口
server.listen('8080');
//用于提示我們服務(wù)器啟動(dòng)成功
console.log('Server running!');

這樣，我們就將一個(gè)我們需要的服務(wù)器搭建好了。

服務(wù)器有了，接下來(lái)，就是前端跨域請(qǐng)求了。

三、JSONP跨域請(qǐng)求之旅:

因?yàn)槲覀兪墙柚?lt;script>標(biāo)簽中的src來(lái)實(shí)現(xiàn)請(qǐng)求的，在服務(wù)器中已經(jīng)約定，在請(qǐng)求后加入'/jsonp?callback'，就將其認(rèn)定為JSONP請(qǐng)求，且callback后帶入一個(gè)js中已有的全局方法。

所以，代碼可以如下：

<!DOCTYPE html>
  <head>
    <title>jsonp</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>
  <body>
    <script>
      function test(data){
        alert(data.name);
      };
    </script>
    <script src="http://127.0.0.1:8080/jsonp?callback=test"></script>
  </body>
</html>

好了，前后端都編碼完畢，接下來(lái)，我們就看看效果吧。

首先啟動(dòng)node服務(wù)器，如下：

注：我將我們搭建的服務(wù)器server.js放在D:/JSONP中

接下來(lái)，運(yùn)行上面所寫的html代碼，可以發(fā)現(xiàn)請(qǐng)求成功，并執(zhí)行test方法。

但，我們一進(jìn)來(lái)，就得跨域請(qǐng)求，是否有點(diǎn)不妥，所以可以動(dòng)態(tài)創(chuàng)建script元素，并指定相應(yīng)請(qǐng)求，任由我們所為。

如下：

//動(dòng)態(tài)創(chuàng)建script標(biāo)簽，并請(qǐng)求
function addScriptTag(src){
  var script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.src = src;
  document.body.appendChild(script);
};
//如：在onload后，跨域請(qǐng)求
window.onload = function(){
  addScriptTag('http://127.0.0.1:8080/jsonp?callback=monkey');
};
//回調(diào)的方法,且必須為全局方法，不然會(huì)報(bào)錯(cuò)
function monkey(data){
  alert(data);
};

JSONP還需要注意的就是，回調(diào)函數(shù)的方法必須是全局的，不然會(huì)報(bào)錯(cuò)的，因?yàn)槭峭ㄟ^script的src請(qǐng)求的嘛，請(qǐng)求成功后立即執(zhí)行。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: