建站
咨詢
售后
建站咨詢
新聞中心
跨域請(qǐng)求是目前在運(yùn)用前后端分離架構(gòu)的開(kāi)發(fā)中經(jīng)常遇到需要解決的一個(gè)問(wèn)題。在這種情況下，很多開(kāi)發(fā)者需要調(diào)用另一臺(tái)服務(wù)器上的數(shù)據(jù)，因此需要進(jìn)行跨域請(qǐng)求。但是，跨域請(qǐng)求并不是一個(gè)簡(jiǎn)單的問(wèn)題，需要對(duì)跨域請(qǐng)求的技術(shù)有清晰的認(rèn)識(shí)以及實(shí)現(xiàn)的技術(shù)手段。其中，本文將會(huì)介紹在前后端分離開(kāi)發(fā)架構(gòu)下，如何使用原生json數(shù)據(jù)庫(kù)實(shí)現(xiàn)服務(wù)器之間的跨域請(qǐng)求。
創(chuàng)新互聯(lián)公司專(zhuān)業(yè)為企業(yè)提供定州網(wǎng)站建設(shè)、定州做網(wǎng)站、定州網(wǎng)站設(shè)計(jì)、定州網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、定州企業(yè)網(wǎng)站模板建站服務(wù)，10余年定州做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
之一步：解決服務(wù)器配置跨域訪問(wèn)
在實(shí)現(xiàn)跨域請(qǐng)求之前，首先需要解決的是跨域訪問(wèn)為什么會(huì)出現(xiàn)問(wèn)題?？缬蛘?qǐng)求的更大問(wèn)題出現(xiàn)在客戶端發(fā)起的請(qǐng)求并不會(huì)直接到達(dá)目標(biāo)服務(wù)器，而是通過(guò)中間層進(jìn)行訪問(wèn)。這種非直接訪問(wèn)帶來(lái)的安全保障是可靠，但是也使得跨域請(qǐng)求變得困難。
因此，我們需要對(duì)目標(biāo)服務(wù)器進(jìn)行配置，允許不同域的客戶端發(fā)起請(qǐng)求。一般來(lái)說(shuō)，這個(gè)過(guò)程分為兩個(gè)步驟：
之一步：設(shè)置目標(biāo)服務(wù)器的跨域請(qǐng)求訪問(wèn)權(quán)限，即CORS（Cross-Origin Resource Sharing）策略。
由于CORS是為了減少安全漏洞設(shè)計(jì)出來(lái)的，因此設(shè)置跨域請(qǐng)求訪問(wèn)權(quán)限需要謹(jǐn)慎，以確保不會(huì)開(kāi)放無(wú)意之間不該公開(kāi)的訪問(wèn)。通常情況下，CORS有兩種方式可以使用：
– 讓服務(wù)器在HTTP響應(yīng)頭中返回 ‘Access-Control-Allow-Origin:*’，這樣就可以開(kāi)放所有域的訪問(wèn)權(quán)限。但是，這種方法會(huì)導(dǎo)致安全范圍變得更加開(kāi)放，只適用于非重要的測(cè)試環(huán)境。
– 讓服務(wù)器返回 ‘Access-Control-Allow-Origin:特定的域名’，這種方法更為安全，在特定域名下運(yùn)行的程序才能訪問(wèn)目標(biāo)服務(wù)器。這種方法應(yīng)該被推薦使用，特別是在重要的生產(chǎn)環(huán)境中。
第二步：讓目標(biāo)服務(wù)器允許跨域請(qǐng)求訪問(wèn)
為了讓目標(biāo)服務(wù)器允許跨域請(qǐng)求，我們需要再HTTP響應(yīng)頭中加入如下字段：
– Access-Control-Allow-Credentials:true 表示允許服務(wù)器端發(fā)送Cookie。
– Access-Control-Allow-Headers: Content-Type,X-Requested-With 類(lèi)似于一個(gè)白名單，限制下發(fā)請(qǐng)求時(shí)客戶端請(qǐng)求頭中會(huì)攜帶那些Header。
第二步：?jiǎn)⒂肗ode.js服務(wù)端程序
由于目前前后端分離的開(kāi)發(fā)架構(gòu)已經(jīng)成為主流，開(kāi)發(fā)者所面對(duì)的主要程序是JavaScript語(yǔ)言和其相關(guān)生態(tài)圈。在Node.js生態(tài)圈中，我們將會(huì)使用Express框架來(lái)搭建一臺(tái)本地服務(wù)。這種方法的優(yōu)勢(shì)在于本地服務(wù)沒(méi)有跨域訪問(wèn)的差異，客戶端調(diào)用我們提供的API，本地服務(wù)將數(shù)據(jù)直接返回，因此跨域請(qǐng)求的鏈接不再成為問(wèn)題。
第三步：構(gòu)建json數(shù)據(jù)庫(kù)
在前面，我們已經(jīng)將目標(biāo)服務(wù)器的CORS策略配置好了，現(xiàn)在我們需要的是一個(gè)數(shù)據(jù)庫(kù)來(lái)存儲(chǔ)客戶端數(shù)據(jù)。在這里，我們推薦使用ON Server這個(gè)工具，它可以幫助我們快速構(gòu)建一個(gè) ON 數(shù)據(jù)庫(kù)，同時(shí)還具備查詢、排序、分頁(yè)等功能。ON Server 基于 Express 框架構(gòu)建而成，支持 REST api 結(jié)構(gòu)，我們可以使用基于 HTTP 請(qǐng)求的方式來(lái)請(qǐng)求和更新數(shù)據(jù)。簡(jiǎn)單來(lái)說(shuō)，ON Server是一個(gè)為前端開(kāi)發(fā)人員和設(shè)計(jì)師提供快速尋求數(shù)據(jù)的本地?cái)?shù)據(jù)服務(wù)器解決方案。
第四步：開(kāi)始跨域請(qǐng)求
接下來(lái)，我們就需要在客戶端中帶上目標(biāo)服務(wù)器的地址，從而建立起跨域請(qǐng)求。常規(guī)的請(qǐng)求步驟如下：
1. 通過(guò)XMLHttpRequest對(duì)象創(chuàng)建跨域請(qǐng)求
2. 添加請(qǐng)求頭，以便檢查服務(wù)器允許CORS跨域請(qǐng)求
3. 使用send方法發(fā)送請(qǐng)求
4. 在請(qǐng)求成功后，使用ON.parse方法解析服務(wù)器響應(yīng)的ON數(shù)據(jù)。
這種方式可以向目標(biāo)服務(wù)器發(fā)起GET/POST請(qǐng)求等，也可以留給客戶端程序員自由發(fā)揮。
結(jié)束語(yǔ)
在前后分離的開(kāi)發(fā)框架下，跨域請(qǐng)求已經(jīng)成為一種不可避免的狀態(tài)。然而，將這種功能正確的應(yīng)用到項(xiàng)目之中仍然是一個(gè)需要擁有一定技巧的問(wèn)題。希望通過(guò)本文的介紹，能夠?qū)η岸思夹g(shù)人員在處理跨域請(qǐng)求時(shí)提供更多的幫助。
相關(guān)問(wèn)題拓展閱讀：
- 解析ON數(shù)據(jù)格式時(shí)遇到AJAX跨域問(wèn)題，怎么解決
- 如何實(shí)現(xiàn)跨域？jsonp實(shí)現(xiàn)原理
- 使用jquery的ajax的jsonp類(lèi)型跨域請(qǐng)求數(shù)據(jù)始終獲取不到返回?cái)?shù)據(jù)呢
解析ON數(shù)據(jù)格式時(shí)遇到AJAX跨域問(wèn)題，怎么解決
使用 jsonp這種方法，
大致講一下吧，叢棚遲html中，有一些標(biāo)簽，本身就是可以跨域的，比如script標(biāo)簽
所以，就利用它，jsonp就是新建一個(gè)script標(biāo)簽，src為你想要跨域獲取數(shù)據(jù)的那個(gè)文件的地址，然后用get的方式傳參，同時(shí)可以傳一個(gè)回調(diào)函數(shù)過(guò)去
等處理完了，獲取到數(shù)據(jù)了，就把這個(gè)script標(biāo)簽再刪和皮掉，就OK
具體的，再百度看一下吧，這兒篇幅也不好展開(kāi)，很常用的滲李
如何實(shí)現(xiàn)跨域？jsonp實(shí)現(xiàn)原理
ONP的最基本的原理是：動(dòng)態(tài)添加一個(gè)標(biāo)簽，而script標(biāo)簽的src屬性是沒(méi)有跨域的限制的。這樣說(shuō)來(lái)，這種跨域方式其實(shí)與ajax XmlHttpRequest協(xié)議無(wú)關(guān)了。
這樣其實(shí)”jQuery AJAX跨域問(wèn)題”就成了個(gè)偽命題，jquery $.ajax方法名有誤導(dǎo)人之嫌。
如果設(shè)為dataType: ‘jsonp’，這個(gè)$.ajax方法就和ajax XmlHttpRequest沒(méi)什么關(guān)系了，枝攔取而代之的則是ONP協(xié)議。ONP是一個(gè)非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端，通過(guò)javascript callback的形式實(shí)現(xiàn)跨域訪問(wèn)。
ONP即ON with Padding。由于同源策略的限制，XmlHttpRequest只允許請(qǐng)求當(dāng)前源（域名、協(xié)議、端口）的資源。如果要進(jìn)行跨域請(qǐng)求， 我們可以通陪乎過(guò)使用html的script標(biāo)記來(lái)進(jìn)行跨域請(qǐng)求，并在響應(yīng)中返回要執(zhí)行的script代碼，其中可以直接使用ON傳遞javascript對(duì)象。 這種跨域的通訊方式稱(chēng)為ONP。
jsonCallback 函數(shù)jsonp(….)：是瀏覽器客戶端注冊(cè)的，獲取跨域服務(wù)器上的json數(shù)據(jù)后，回調(diào)的函數(shù)
Jsonp的執(zhí)行過(guò)程如下：
首先在客戶端注冊(cè)一個(gè)callback (如:’jsoncallback’), 然后把callback的名字(如:jsonp)傳給服務(wù)器。注意：服務(wù)端得到callback的數(shù)值后，要用jsonp(……)把將要輸出的json內(nèi)容包括起來(lái)，此時(shí)，服務(wù)器生成 json 數(shù)據(jù)才能被客戶端正確接收。
然后以 javascript 語(yǔ)法的方式，生成一個(gè)function， function 名字就是傳遞上來(lái)的參數(shù) ‘jsoncallback’的值 jsonp.
最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞?，放置?function 中，這樣就生成了一段 js 語(yǔ)法的文檔，返回給客戶端。
客戶端瀏覽器，解析script標(biāo)簽，并執(zhí)行返回的 javascript 文檔，此時(shí)javascript文檔數(shù)據(jù)，作為參數(shù)， 傳入到了客戶端預(yù)先定義好的 callback 函數(shù)(如上例中jquery $.ajax()方法封裝的的success: function (json))里。
可以說(shuō)jsonp的方式原理上和是一致的(qq空間就是大量采用蘆搭悉這種方式來(lái)實(shí)現(xiàn)跨域數(shù)據(jù)交換的)。ONP是一種腳本注入(Script Injection)行為，所以有一定的安全隱患。
那jquery為什么不支持post方式跨域呢？
雖然采用post+動(dòng)態(tài)生成iframe是可以達(dá)到post跨域的目的(有位js牛人就是這樣把jquery1.2.5 打patch的)，但這樣做是一個(gè)比較極端的方式，不建議采用。
也可以說(shuō)get方式的跨域是合法的，post方式從安全角度上，被認(rèn)為是不合法的，萬(wàn)不得已還是不要?jiǎng)ψ咂h。
client端跨域訪問(wèn)的需求看來(lái)也引起w3c的注意了，看資料說(shuō)html5 WebSocket標(biāo)準(zhǔn)支持跨域的數(shù)據(jù)交換，應(yīng)該也是一個(gè)將來(lái)可選的跨域數(shù)據(jù)交換的解決方案。
使用jquery的ajax的jsonp類(lèi)型跨域請(qǐng)求數(shù)據(jù)始終獲取不到返回?cái)?shù)據(jù)呢
使用jquery的ajax的jsonp類(lèi)型跨域請(qǐng)求數(shù)據(jù)、始終獲取不到返回?cái)?shù)據(jù)是設(shè)置錯(cuò)誤造成的，解決方法為：
1、創(chuàng)建基本的文件結(jié)構(gòu)json_ajax.html和json_ajax.php,下載jquery.js。
2、如圖分別編寫(xiě)json_ajax.html和json_ajax.php文件的編碼。
3、分別在w(l)amp環(huán)境下運(yùn)行json_ajax.html和json_ajax.php。
4、經(jīng)過(guò)源碼和運(yùn)行結(jié)果的分析，知道了在json_ajax.html中設(shè)置了按拆穗握鈕的點(diǎn)擊事件,點(diǎn)擊按鈕。
注意事項(xiàng)：
jQuery的核心特性可以旅慶總結(jié)為：具有獨(dú)特的鏈?zhǔn)秸Z(yǔ)法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可族余對(duì)CSS選擇器進(jìn)行擴(kuò)展；擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE6.0+、FF1.5+、Safari2.0+、Opera9.0+等。
關(guān)于跨域請(qǐng)求原生json數(shù)據(jù)庫(kù)的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。
成都網(wǎng)站營(yíng)銷(xiāo)推廣找創(chuàng)新互聯(lián)，全國(guó)分站站群網(wǎng)站搭建更好做SEO營(yíng)銷(xiāo)。
創(chuàng)新互聯(lián)（www.cdcxhl.com）四川成都IDC基礎(chǔ)服務(wù)商，價(jià)格厚道。提供成都服務(wù)器托管租用、綿陽(yáng)服務(wù)器租用托管、重慶服務(wù)器托管租用、貴陽(yáng)服務(wù)器機(jī)房服務(wù)器托管租用。
分享文章：如何實(shí)現(xiàn)跨域請(qǐng)求原生json數(shù)據(jù)庫(kù)？ (跨域請(qǐng)求原生json數(shù)據(jù)庫(kù))
鏈接地址：http://www.fisionsoft.com.cn/article/djsgiej.html
