2. 程式人生 > 其它 >jsonp跨域請求原理

jsonp跨域請求原理

阿新 • • 發佈：2021-01-03

技術標籤：jsonpajaxhttp

jsonp跨域請求原理

今天咱們講講jsonp跨域請求原理吧！

在進行網站開發的過程中經常會用到第三方的資料，但是由於同源策略的限制導致ajax不能傳送請求，因此也無法獲得資料。解決ajax的跨域問題有兩種方法：
一、jsonp

二、XMLHttpRequest2中可以配合服務端來解決，在響應頭中加入Access-Control-Allow-Origin:*

1、同源：

同源策略是瀏覽器的一種安全策略，所謂同源是指，域名，協議，埠號完全相同
　　1.1目的：保護使用者資訊保安
　　1.2限制：cookie、localStorage和IndexDB無法讀取

　　無法操作跨域的iframe裡的dom元素
　　ajax請求不能傳送
2、跨域：

不同源則為跨域

(1) http://api.example.com/detail.html 不同源 域名不同
(2) https//www.example.com/detail.html 不同源 協議不同
(3) http://www.example.com:8080/detail.html 不同源 埠不同
(4) http://api.example.com:8080/detail.html 不同源 域名、埠不同
(5) https://api.example.com/detail.html 不同源 協議、域名不同
(6) https://www.example.com:8080/detail.html 不同源 埠、協議不同

(7) http://www.example.com/detail/index.html 同源 只是目錄不同

3、jsonp原理：

其本質是利用了標籤具有可跨域的特性，由服務端返回預先定義好的javascript函式的呼叫，並且將服務端資料以該函式引數的形式傳遞過來

4、案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<
 
body>
    <h1>後臺獲取的結果</h1>
    {{ result }}
    <h1>js直接獲取結果</h1>
    <input type="button" value="獲取資料" onclick="getContent();" />
    <div id="container"></div>
    <script src="/static/js/jquery-1.12.4.js"></script>
    <script>
        function getContent(){
            /*                   ajax原生方式傳送
            var xhr = new XMLHttpRequest();
            xhr.open('GET','http://wupeiqi.com:8001/jsonp.html?k1=v1&k2=v2');
            xhr.onreadystatechange = function(){
                console.log(xhr.responseText);
            };
            xhr.send();
            */
            /*                      
            var tag = document.createElement('script');
            tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';
            document.head.appendChild(tag);
            document.head.removeChild(tag);
            */
            $.ajax({
                url: 'http://www.jxntv.cn/data/jmd-jxtv2.html',   //江西電視臺的url
                type: 'POST',                                        //請求方式為POST
                dataType: 'jsonp',                                  //資料格式為jsonp
                jsonp: 'callback',
                jsonpCallback: 'list'                              //表示url的callback等於list,會額外的通過url發過去
            })
        }

        function list(arg){
            console.log(arg);
        }
    </script>
</body>
</html>

今天就到 這兒吧！下課。。。。。

相關推薦

jsonp跨域請求原理

技術標籤：jsonpajaxhttp jsonp跨域請求原理 今天咱們講講jsonp跨域請求原理吧！ 在進行網站開發的過程中經常會用到第三方的資料，但是由於同源策略的限制導致ajax不能傳送請求，因此也無法獲得資料。解決ajax的

關於JSONP跨域請求原理的深入解析

目錄什麼是同源策略什麼是ONP練習jsonp的缺點總結什麼是同源策略 同源策略，它是由Netscape提出的一個著名的安全策略。現在所有支援 的瀏覽器都會使用這個策略。

原生js實現ajax請求和JSONP跨域請求操作示例

本文例項講述了原生js實現ajax請求和JSONP跨域請求。分享給大家供大家參考，具體如下：

Django跨域請求原理及實現程式碼

一 同源策略 同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源

Ajax的Jsonp跨域請求技術

Ajax的跨域請求 跨域獲取使用者寫入資料 <!DOCTYPE html> <html> <head> <meta charset=\"utf-8\" />

spring security中的csrf防禦原理(跨域請求偽造)

什麼是csrf？ csrf又稱跨域請求偽造，攻擊方通過偽造使用者請求訪問受信任站點。CSRF這種攻擊方式在2000年已經被國外的安全人員提出，但在國內，直到06年才開始被關注，08年，國內外的多個大型社群和互動網站分別爆出

Spring Boot和Vue跨域請求問題原理解析

這篇文章主要介紹了Spring Boot和Vue跨域請求問題原理解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

在vue中使用jsonp進行跨域請求介面操作

前言： 這裡我們使用的是第三方外掛jsonp。 github網址：https://github.com/webmodules/jsonp

jsonp跨域原理_回味經典之：那些年曾談起的跨域

技術標籤：jsonp跨域原理 對於前端開發來說跨域應該是最不陌生的問題了，無論是開發過程中還是在面試過程中都是一個經常遇到的一個問題，在開發過程中遇到這個問題的話一般都是找後端同學去解決，以至於很多人都

jsonp跨域原理

跨域的產生原因： 由於瀏覽器同源策略的限制，非同源下的請求，都會產生跨域問題，jsonp即是為了解決這個問題出現的一種簡便解決方案。

[1.6W字]瀏覽器跨域請求的原理, 以及解決方法(可以純前端實現) #flight.Archives011

[1.6W字]瀏覽器跨域請求的原理, 以及解決方法(可以純前端實現) #flight.Archives011

JSONP-客戶端解決Ajax跨域請求的方案之一

1.封裝jsonp.js 客戶端程式碼 <script> function jsonp(options) { // 1 動態的建立一個script標籤

SpringBoot實現jsonp跨域通訊

實現jsonp跨域通訊 實現基於jsonp的跨域通訊方案 原理 瀏覽器對非同源ajax請求有限制，不允許傳送跨域請求

Nginx配置跨域請求Access-Control-Allow-Origin * 詳解

前言 當出現403跨域錯誤的時候 No \'Access-Control-Allow-Origin\' header is present on the requested resource，需要給Nginx伺服器配置響應的header引數：

簡單瞭解django處理跨域請求最佳解決方案

一、什麼是跨域請求 跨域： 簡單來說就是 A 網站的 javascript 程式碼試圖訪問 B 網站，包括提交內容和獲取內容。這顯然是不安全的。為此，瀏覽器的鼻祖：網景（Netscape）公司提出了優秀的解決方案：著名的瀏覽器同

Python Tornado之跨域請求與Options請求方式

問題背景 公司的專案是前後端分離，前端Vue+後端JavaSpringBoot為主，部分功能是PythonTornado，那麼需要支援一個是跨域以及Options請求。

ASP.NET WebApi+Vue前後端分離之允許啟用跨域請求

原文:ASP.NET WebApi+Vue前後端分離之允許啟用跨域請求目錄導航：前言：一、解決Vue報錯：OPTIONS 405 Method Not Allowed問題：錯誤重現：解決方法：二、解決ASP.NET WebApi跨域資源共享-Cross Origin Resource Sha

Springboot處理CORS跨域請求的三種方法

前言 Springboot跨域問題，是當前主流web開發人員都繞不開的難題。但我們首先要明確以下幾點

C#+.netFrameWork4.5.2+WebAPI+Jquery+Ajax跨域請求問題

webAPI給予.net frameWork4.5.2 選中webAPI專案=》nuget包管理器=》輸入microsoft.aspnet.webapi.cors=》安裝

NodeJS_0003：nodejs 設定允許跨域請求

1， index.js檔案中：var http = require(\'http\'); var express = require(\'express\'); var router = express.Router();