溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

借助node實(shí)戰(zhàn)JSONP跨域?qū)嵗?/h1>
發(fā)布時(shí)間：2020-08-21 15:54:45 來源：腳本之家 閱讀：102 作者：猴子猿 欄目：web開發(fā)

一、前言：

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

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)求信息。

如下圖所示：

借助node實(shí)戰(zhàn)JSONP跨域?qū)嵗?> </p> <p>了解了JSONP的大體思路，接下來，我們借助node來搭建一個(gè)簡(jiǎn)單的服務(wù)器，與前端一步步實(shí)現(xiàn)JSONP帶來的跨域請(qǐng)求之旅吧。</p> <p><span ><strong>二、搭建node server： </strong></span></p> <p>因?yàn)榍岸艘獙?shí)現(xiàn)跨域請(qǐng)求，需要與后臺(tái)配合。在這里，我們使用是node來模擬后臺(tái)服務(wù)器。</p> <p>So，你得對(duì)node有一定認(rèn)識(shí)以及開發(fā)環(huán)境。</p> <p>接下來，我們就編寫一個(gè)簡(jiǎn)單的node服務(wù)器吧。</p> <p>首先，我們需要引入http模塊，因?yàn)槭腔趆ttp請(qǐng)求的嘛。然后就是用其創(chuàng)建一個(gè)http服務(wù)器，如監(jiān)聽的是8080端口。</p> <p>如下：</p> <div id= 

'use strict';
//通過require將http庫包含到程序中
var http = require('http');
//創(chuàng)建新的HTTP服務(wù)器
var server = http.createServer();
//通過request事件來響應(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'的路徑名來判斷。

如下：

'use strict';
//通過require將http庫包含到程序中
var http = require('http');
//引入url模塊解析url字符串
var url = require('url');
//創(chuàng)建新的HTTP服務(wù)器
var server = http.createServer();
//通過request事件來響應(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è)模塊，來處理query字符串。

如下：

'use strict';
//通過require將http庫包含到程序中
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事件來響應(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ù)器有了，接下來，就是前端跨域請(qǐng)求了。

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

因?yàn)槲覀兪墙柚?lt;script>標(biāo)簽中的src來實(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>

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

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

借助node實(shí)戰(zhàn)JSONP跨域?qū)嵗?></p> <p>注：我將我們搭建的服務(wù)器server.js放在D:/JSONP中</p> <p>接下來，運(yùn)行上面所寫的html代碼，可以發(fā)現(xiàn)請(qǐng)求成功，并執(zhí)行test方法。</p> <p><img src= 

//動(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í)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)
推薦閱讀：
  1. 跨域請(qǐng)求之JSONP
  2. ajax跨域之jsonp

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

猜你喜歡

AI
助
手