JSONP（JSON with Padding）
想從javascript拿到不同源的資料，除了上一篇介紹的CORS，其實還有一個東西叫JSOP，是指透過<script src="xxx"></script>的方式繞過同源政策來實現cross origin。
事實上我們前端常用的jquery, angular, vue等等，透過cdn import進來的url一定都是非同源，那為什麼都沒有cross origin相關錯誤訊息出現呢? 因為script tag的src attribute不受同源政策限制。
以下直接用程式碼來了解:
利用<script src="xxx"></script>透過get method來要資料，傳入user id以及callback名稱，user id是讓server動態產生指定user的資料用的，callback是讓server知道javascript的callback function叫什麼名字。
後端其實就是根據傳入的user id抓取資料後，回傳一段js程式碼來呼叫前端的callback function(receiveData)把資料帶進去。
現在很少人在用JSONP了，因為只能用get method來送request，敏感資料不可能這樣傳，且如果需要帶進去的參數比較多，也有可能超過url長度限制。
本筆記參考:
1. https://medium.com/@brianwu291/jsonp-with-simple-example-4711e2a07443
2. https://medium.com/@miahsuwork/%E7%AC%AC%E4%B9%9D%E9%80%B1-%E9%80%8F%E9%81%8E%E7%80%8F%E8%A6%BD%E5%99%A8%E4%BA%A4%E6%8F%9B%E8%B3%87%E6%96%99-%E5%90%8C%E6%BA%90%E6%94%BF%E7%AD%96-cors-%E7%AC%AC%E4%B8%89%E7%A8%AE%E6%96%B9%E5%BC%8F-jsonp-e45603886287
3. https://zh.wikipedia.org/wiki/JSONP
1. https://medium.com/@brianwu291/jsonp-with-simple-example-4711e2a07443
2. https://medium.com/@miahsuwork/%E7%AC%AC%E4%B9%9D%E9%80%B1-%E9%80%8F%E9%81%8E%E7%80%8F%E8%A6%BD%E5%99%A8%E4%BA%A4%E6%8F%9B%E8%B3%87%E6%96%99-%E5%90%8C%E6%BA%90%E6%94%BF%E7%AD%96-cors-%E7%AC%AC%E4%B8%89%E7%A8%AE%E6%96%B9%E5%BC%8F-jsonp-e45603886287
3. https://zh.wikipedia.org/wiki/JSONP
即將進入廣告，捲動後可繼續閱讀
為什麼會看到廣告
21會員
161內容數
留言0
查看全部
你可能也想看
Google News 追蹤
在這篇教學文章中，我們將展示如何使用 Node.js 建立一個簡單的伺服器，並解決常見的跨來源資源共享（CORS）問題，確保伺服器能夠接收並處理來自不同來源的資料。
xhr
在下面的例子裡，我們首先建立了一個 XMLHttpRequest 物件，並使用 .open() 開啟一個 URL，最後使用 .send() 發出 request。
具體來說步驟有四個：
建立XMLHttpReque
開啟一個請求。
送出請求。
拿到回應後去處理畫面要如何呈現。
JSON（JavaScript Object Notation）是一種用於資料交換的輕量級資料格式，通常用於網路應用程式之間的資料傳遞。
JSON的格式易於閱讀和撰寫，也易於解析和產生，因此它在開發中被廣泛使用。
JSON由兩種結構組成：物件（Object）和陣列（Array）。
之前在【什麼是網路請求（HTTP response）】筆記裡有提到，網路請求遇到 CORS 跨域問題，在開發時可以透過 vite 的反向代理來解決，那麼什麼是反向代理，有反向代理的話是不是也有正向代理呢?
在開發前後端分離架構時，使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大，揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢，但application/json會觸發預檢請求，需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
在之前的文章當中曾經提到過 JavaScript 中的物件有一個特別的機制：傳參考（Called by reference），如果正確性再高一點的話，則可以稱之為傳共享（Called by sharing）。
JSON 格式因為其輕巧、易於讀寫的特性，所以普遍應用於數據儲存。本文將介紹如何使用 Python 來讀取、處理、解析和修改 JSON 檔案。
在剛開始寫 JavaScript 可能大多數的人不會特別意識到 JavaScript 的型別系統有什麼特別之處，我是在看完 Youtube 上 CS50 的課程，才理解到在不同的程式語言中，會因為語言的特性而有不同的系統，JavaScript 就是偏向比較特別的那一種。
在這篇教學文章中，我們將展示如何使用 Node.js 建立一個簡單的伺服器，並解決常見的跨來源資源共享（CORS）問題，確保伺服器能夠接收並處理來自不同來源的資料。
xhr
在下面的例子裡，我們首先建立了一個 XMLHttpRequest 物件，並使用 .open() 開啟一個 URL，最後使用 .send() 發出 request。
具體來說步驟有四個：
建立XMLHttpReque
開啟一個請求。
送出請求。
拿到回應後去處理畫面要如何呈現。
JSON（JavaScript Object Notation）是一種用於資料交換的輕量級資料格式，通常用於網路應用程式之間的資料傳遞。
JSON的格式易於閱讀和撰寫，也易於解析和產生，因此它在開發中被廣泛使用。
JSON由兩種結構組成：物件（Object）和陣列（Array）。
之前在【什麼是網路請求（HTTP response）】筆記裡有提到，網路請求遇到 CORS 跨域問題，在開發時可以透過 vite 的反向代理來解決，那麼什麼是反向代理，有反向代理的話是不是也有正向代理呢?
在開發前後端分離架構時，使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大，揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢，但application/json會觸發預檢請求，需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
在之前的文章當中曾經提到過 JavaScript 中的物件有一個特別的機制：傳參考（Called by reference），如果正確性再高一點的話，則可以稱之為傳共享（Called by sharing）。
JSON 格式因為其輕巧、易於讀寫的特性，所以普遍應用於數據儲存。本文將介紹如何使用 Python 來讀取、處理、解析和修改 JSON 檔案。
在剛開始寫 JavaScript 可能大多數的人不會特別意識到 JavaScript 的型別系統有什麼特別之處，我是在看完 Youtube 上 CS50 的課程，才理解到在不同的程式語言中，會因為語言的特性而有不同的系統，JavaScript 就是偏向比較特別的那一種。