1. 程式人生 > >跨域訪問的解決方案(非HTML5的方法:JSONP)

跨域訪問的解決方案(非HTML5的方法:JSONP)

跨域訪問一直是困擾很多開發者的問題之一。因為涉及到安全性問題,所以跨域訪問預設是不可以進行的,否則假設今天我寫了一段js去更改google的圖示,明天他寫了一段程式碼去吧google首頁的文字全部變成梵文,那還得了?

首先,講下什麼是相同的域。域是這樣定義的,協議名+host名+埠號,只有這3個都一樣,才能說是同樣的域,同樣的域裡面的訪問不受到同源策略限制,你可以用你的js程式碼任意的去操作資源,但是不同域你就不能這樣做了。

解決跨域訪問有很多方法,最常見的一種“單向”跨域訪問方式是用JSONP(Json with Padding),它解決思路就是如果域A (充當客戶端)上的js 要操作域B(充當伺服器端)上的資源,那麼只要吧域A上的js函式名傳遞給域B,然後在域B進行封裝,它解析來自域A的函式名,並且將域B上的資源轉為json物件,並且兩者進行組合,組合後的字串就是 域A函式名(域B json物件) 

這種函式呼叫的形式,然後當域A上用script src=""的形式訪問時,它拿到的結果就是一段js程式碼,並且是域A函式名(域B json物件)的形式,於是就達到了域A函式處理域B資源的效果。

為了更有說服力,我們這裡做一個非常簡單的實驗,假定域A(客戶端)有個應用部署在http://localhost:8180上,域B(伺服器端)有個應用部署在http://localhost:8080上,顯然這2個域由於埠不同,所以域A如果要訪問域B必定是跨域訪問的。域A 有一段js函式,域B提供了一個json物件,我們想要域A的js函式操作域B的json物件。會怎樣呢?

服務端(我們部署在http://localhost:8080

上):

先貼上域B(伺服器端的程式碼),它用一個java servlet,負責接收來自客戶端的帶回調函式名引數的請求,並且與自己端提供的json物件包裝,包裝為一個jsonp後然後放入響應輸出流。

  1. package com.charles.jsonp; 
  2. import java.io.IOException; 
  3. import java.io.PrintWriter; 
  4. import javax.servlet.ServletException; 
  5. import javax.servlet.http.HttpServlet; 
  6. import javax.servlet.http.HttpServletRequest; 
  7. import javax.servlet.http.HttpServletResponse; 
  8. import org.json.simple.JSONObject; 
  9. /** 
  10.  * Servlet implementation class JSONPServlet 
  11.  */
  12. publicclass JSONPServlet extends HttpServlet { 
  13.     privatestaticfinallong serialVersionUID = 1L; 
  14.     /** 
  15.      * @see HttpServlet#HttpServlet() 
  16.      */
  17.     public JSONPServlet() { 
  18.         super(); 
  19.         // TODO Auto-generated constructor stub
  20.     } 
  21.     /** 
  22.      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) 
  23.      */
  24.     protectedvoid doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
  25.         // TODO Auto-generated method stub
  26.         //get the callback function which comes from client
  27.         String callbackFuncFromClient= request.getParameter("callbackFunc"); 
  28.         //create a json object
  29.         JSONObject jsonInfo = new JSONObject(); 
  30.         jsonInfo.put("name","charles"); 
  31.         jsonInfo.put("title""technical lead"); 
  32.         jsonInfo.put("info","talent man"); 
  33.         //create a string which stands for a javascript with the format func(jsonobject)
  34.         StringBuffer jsonpString = new StringBuffer(); 
  35.         jsonpString.append(callbackFuncFromClient).append("(").append(jsonInfo.toJSONString()).append(")"); 
  36.         //construct the output jsonp and output to the client
  37.         response.setCharacterEncoding("utf-8"); 
  38.         PrintWriter out = response.getWriter(); 
  39.         out.println(jsonpString); 
  40.         out.flush(); 
  41.     } 
  42.     /** 
  43.      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) 
  44.      */
  45.     protectedvoid doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
  46.         // TODO Auto-generated method stub
  47.     } 

然後我們把這個servlet對映到某個url上,見web.xml:

  1. <servlet>
  2.     <description>This servlet will create a jsonp object,it wraps the js function and the json object</description>
  3.     <display-name>JSONPServlet</display-name>
  4.     <servlet-name>JSONPServlet</servlet-name>
  5.     <servlet-class>com.charles.jsonp.JSONPServlet</servlet-class>
  6.   </servlet>
  7.   <servlet-mapping>
  8.     <servlet-name>JSONPServlet</servlet-name>
  9.     <url-pattern>/JSONPServlet</url-pattern>
  10.   </servlet-mapping>

現在我們測試伺服器端是否已經正確部署:

我們開啟瀏覽器,輸入訪問伺服器端這個servlet的url,注意帶上請求引數,引數名為callbackFunc,引數值為任意函式名:則我們可以看到封裝後的JSONP效果,的確是“函式名(json物件)”的字串形式。比如我們例子中,我們傳入的函式名是 someFunc ,而伺服器端自身提供的json物件是{"title":"technical lead","name":"charles","info":"talent man"},則最後伺服器端返回的JSONP 字串是someFunc{json}

客戶端:

伺服器端部署正確後,我們讓客戶端部署在另外一個域:http://localhost:8180上,要實現跨域訪問,客戶端必須有2部分,1是定義一個回撥函式(這個函式用於將來處理伺服器json資料),二是一個頁面,這個頁面要用<script src來指向伺服器端能 提供JSONP的url),我們一步步來:

先定義一個回撥函式:

這個回撥函式能在控制檯和alert視窗打印出伺服器端的json物件提供的資訊

  1. //這段程式碼用於定義回撥函式
  2. function clientMethodWhichOperateServerResource(result){ 
  3.     console.log("Begin to execute the call function named clientMethodWhichOperateServerResource(result)"); 
  4.     //獲取伺服器端傳遞過來的json字串,轉為json物件
  5.     var jsonObject=result; 
  6.     //從json物件中分離出一些相關資訊
  7.     var name=jsonObject.name; 
  8.     var title=jsonObject.title; 
  9.     var info=jsonObject.info; 
  10.     console.log("name: "+name); 
  11.     console.log("title: "+title); 
  12.     console.log("info: "+info); 
  13.     var serverInfoString="姓名: "+name+","
  14.     serverInfoString+="頭銜: "+title+","
  15.     serverInfoString+="資訊: "+info; 
  16.     alert(serverInfoString); 

然後我們定義一個頁面:

這個頁面的關鍵之處在於兩段<script>,第一段是引入了客戶端的回撥函式(上面我們定義的那段),從而這個函式被頁面可視,精華在於第二段,它用src標籤指向了伺服器端(http://localhost:8080域上)能提供JSONP 字串物件的url(對應上面我們寫的那個servlet),而且吧回撥函式的名字當做引數傳遞過去(就像我們用於測試伺服器端的訪問示例一樣):

  1. <%@ page language="java"contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
  7. <title>這個頁面用於演示JSONP</title><base>
  8. <!--這裡引入了javascript檔案,js函式有2個,一個是回撥函式,它的函式名將作為引數傳遞給伺服器端, 
  9. 另外一個是負責向服務端用src的方式請求jsonp  -->
  10. <!-- 這裡引入的js檔案中定義了回撥函式,這個函式的函式名將作為引數傳遞到伺服器端,它最終會操作伺服器端的資源 -->
  11. <scripttype="text/javascript"src="js/callbackFuncDef.js"></script>
  12. <!-- 這裡就是jsonp的使用,它以src的方式向伺服器端傳送一個jsonp請求,並且把這邊定義好的處理函式的函式名以引數形式傳遞 -->
  13. <scripttype="text/javascript"src="http://localhost:8080/JSONPServerSide/JSONPServlet?callbackFunc=clientMethodWhichOperateServerResource"></script>
  14. </head>
  15. <body>
  16. <p>這個JSONP的例子的要點是,它用定義在客戶端的一段js程式碼,去處理伺服器上的json資源</p>
  17. </body>
  18. </html>

所以,當我們開啟瀏覽器訪問客戶端的頁面時候,它就可以顯示結果了,我們可以看到,它的確取到了伺服器端的資料(json物件)並且顯示在客戶端了:

所以,非常順利成章,跨域訪問得到實現。

相關推薦

訪問解決方案HTML5方法JSONP)

跨域訪問一直是困擾很多開發者的問題之一。因為涉及到安全性問題,所以跨域訪問預設是不可以進行的,否則假設今天我寫了一段js去更改google的圖示,明天他寫了一段程式碼去吧google首頁的文字全部變成梵文,那還得了?首先,講下什麼是相同的域。域是這樣定義的,協議名+host名+埠號,只有這3個都一樣,才能說是

[轉]No 'Access-Control-Allow-Origin' header is present on the requested resource.'Ajax訪問解決方案

不能 ade 方式 ole 相同域名 all log head 允許 原 https://blog.csdn.net/zhoucheng05_13/article/details/53580683 No ‘Access-Control-Allow-Origin‘ heade

vue+django問題解決方案前後端兩種方案

1.Vue前端設定代理(方案一) 我們在使用vue-cli啟動專案的時候npm run dev便可以啟動我們的專案了,通常我們的請求地址是以localhost:8080來請求介面資料的,localhost是沒有辦法設定cookie的。  我們可以在vu

No 'Access-Control-Allow-Origin' header is present on the requested resource.'Ajax訪問解決方案

出現該錯誤是由於存在網站跨域訪問的問題。 什麼是網站跨域,簡單來講,當你通過ajax來請求或傳送資料時,兩個域名之間不能跨過域名來發送請求或者請求資料,瀏覽器會認為它是不安全的。 解決方式: 1、伺服器端解決方案 設定響應報文頭 response.setHeader

Javascript訪問解決方案

原文地址:http://blog.csdn.net/lovingprince/article/details/2954675 由於安全方面的考慮, Javascript 被限制了跨域訪問的能力,但是有時候我們希望能夠做一些合理的跨域訪問的事情,那麼怎麼辦呢? 這裡分兩類

Uploadify訪問解決方案

       最近專案中要用檔案上傳控制元件,我就想到了Uploadify,但是Uploadify內部是通過flash來實現檔案上傳的,所以當跨域上傳檔案時就會報security error,就這需要配置跨域策略檔案crossdomain.xml檔案。基於flash安全沙箱策

Vue 前端解決方案心得記錄)

背景: 今天面試一面和二面都還ok,三面是兩個小姐姐(工作性質應該是外包駐場,所以有甲方來面),簡歷上巴拉巴拉的簡單聊了一下,到了關鍵了,小姐姐說問一下基礎的東西(這也是最怕的,畢竟Vue我之前用的挺淺,侷限在專案所用),小姐姐問,怎麼解決Vue專案中的跨域問題

詳解SpringBoot應用訪問解決方案

一、什麼是跨域訪問 說到跨域訪問,必須先解釋一個名詞:同源策略。所謂同源策略就是在瀏覽器端出於安全考量,向服務端發起請求必須滿足:協議相同、Host(ip)相同、埠相同的條件,否則訪問將被禁止,該訪問也就被稱為跨域訪問。 雖然跨域訪問被禁止之後,可以在一定程度上提高了應用的安全性,但也為開發帶來了一定的麻煩。

前後端互動問題解決方案資源共享CORS)

跨域資源共享(CORS) 普通跨域請求:只服務端設定Access-Control-Allow-Origin即可,前端無須設定,若要帶cookie請求:前後端都需要設定。 需注意的是:由於同源策略的限制,所讀取的cookie為跨域請求介面所在域的cookie,而非當前頁。如

json2)----js解決方案

之前轉載過一篇關於跨域的文章,分不清什麼叫主域跨域和二級跨域 下面這篇微博的博主寫的很好,也很清楚。 轉載連結:http://www.cnblogs.com/oneword/archive/2012/12/03/2799443.html 1.什麼是跨域 我們經常會在

通用版父頁面訪問iframe裡面的內容解決方案,jupyter+tornado通訊解決方案

1、問題:獲取jupyter裡面的內容現在已經將jupyter放進iframe裡面,現在的問題描述為:在父頁面獲取iframe裡面的內容,iframe裡面就是jupyter,這裡的父頁面是自己搭建的tornado伺服器開啟的頁面,網址為127.0.0.1:9000,ifram

C#進階系列——WebApi 問題解決方案CORS

dea ati ice pro target default 異常 測試工具 復雜 前言:上篇總結了下WebApi的接口測試工具的使用,這篇接著來看看WebAPI的另一個常見問題:跨域問題。本篇主要從實例的角度分享下CORS解決跨域問題一些細節。 WebApi系列文章

前端-關於CORS解決方案,面向服務端

red 瀏覽器 環境 和我 methods retrieve name 後臺 一件事 最近自己在寫後臺管理系統的時候,並沒有采用jsp、freemaker、葉子等模板技術,而是由後端提供數據api,前端通過AJAX和JQuery來動態操作頁面上的一些div、table元素,

在Vue中如何使用axios訪問數據轉)

基本上 屬性 本地測試 original ogr 必須 內容 .com 內心 最近在項目中需要用到axios,所以就惡補一下這個axios到底是什麽東東。越來它是vue-resource的替代品,官網也說了,以後都用axios, vue-resource不在維護。那麽這

ajax請求解決方案

tro cti jquer 解決方案 tab all ajax跨域 自帶 b-s 大家好,今天我們學習了js的跨域請求的解決方案,由於JS中存在同源策略,當請求不同協議名,不同端口號、不同主機名下面的文件時,將會違背同源策略,無法請求成功!需要進行跨域處理! 方案一、後臺P

ajax 請求解決方案

allow option ajax cred eth post delet 求解 delete response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access

常見解決方案

div 請求 如果 主域 安全問題 highlight chrom call navig 由於考慮到安全性問題,HTML的同源策略不允許JavaScript進行跨域操作,但是隨著web端功能越來越多,對跨域需求逐漸增大,於是乎便催生了很多解決跨域的方法,通過網絡搜索和資

laravel 5.5 oauth2.0 問題解決方案

title apach war laravel jsonp 另一個 over gin strong 一、laravel-Cors 安裝 在終端執行安裝命令如下: composer require barryvdh/laravel-cors

CORS 與 TP5中解決方案

在做專案過程中,使用Vue-element-admin作為前端,ThinkPHP5作為後端框架進行開發,會遭遇跨域問題,本文給出ThinkPHP5解決跨域 1.CORS的概念     CORS(Cross-Origin Resource Sharing 跨源資源共享),當

angularjspost解決方案

前端同學李雷和後臺同學韓梅梅分別在自己電腦上進行開發,後臺介面寫好的時候,李雷改動完就把前端程式碼上傳到gitlab,然後在測試機上從gitlab上拉下來,然後在測試機上移動最新程式碼,最後回到本機重新整理頁面。有時候碰到網速不好的情況傳個git傳了半天,或者李雷剛上傳完發現少寫了一個單詞,加上再傳