2021-10-12 前端達人
在我們了解JSONP 和 CORS 之前我們先明確一下：
實際上，cors和jsonp都是用于解決跨域問題，當兩個頁面的協議、域名、端口號中有一個不一致時就存在了跨域，一旦出現跨域，瀏覽器發送跨域請求后，請求回來的數據都會被瀏覽器所攔截，準備一張圖給大家看看：
現下實現跨域數據請求，最主要的兩種解決方案分別是 JSONP 和 CORS 。
JSONP(???)
JSONP (JSON with Padding) 是 JSON 的一種“使用模式”，可用于解決主流瀏覽器的跨域數據訪問的問題。
JSONP的實現原理(???)
概念：瀏覽器端通過 <script> 標簽的 src 屬性，請求服務器上的數據，同時，服務器返回一個函數的調用。這種請求數據的方式叫做 JSONP
特點：
JSONP 不屬于真正的 Ajax 請求，因為它沒有使用 XMLHttpRequest 這個對象
JSONP 僅支持 GET 請求，不支持 POST、PUT、DELETE 等請求
CORS (跨域資源共享) 由一系列 HTTP 響應頭組成，這些 HTTP 響應頭決定瀏覽器 是否阻止前端 JS 代碼跨域獲取資源
瀏覽器的同源安全策略默認會阻止網頁“跨域”獲取資源。但如果接口服務器配置了 CORS 相關的 HTTP 響應頭，就可以解除瀏覽器端的跨域訪問限制
index.html文件代碼演示：
-
<!DOCTYPE html>
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<title>Document</title>
-
<script src="jquery.min.js"></script>
-
</head>
-
-
<body>
-
<button class="get">get請求</button>
-
<button class="post">post請求</button>
-
<script>
-
$('.get').on('click', function() {
-
$.ajax({
-
method: 'get',
-
url: 'http://127.0.0.1/api/get?name=hua&age=18',
-
success: function(res) {
-
console.log(res);
-
}
-
})
-
})
-
$('.post').on('click', function() {
-
$.ajax({
-
method: 'post',
-
url: 'http://127.0.0.1/api/post',
-
data: {
-
name: 'lajitong',
-
age: '111'
-
},
-
success: function(res) {
-
console.log(res);
-
}
-
})
-
})
-
</script>
-
</body>
-
-
</html>
此時會出現跨域問題，我們需要使用 cors 中間件解決跨域問題
cors 是 Express 的一個第三方中間件。通過安裝和配置 cors 中間件，可以很方便地解決跨域問題
使用步驟
安裝中間件： npm install cors
導入中間件： const cors = require('cors')
配置中間件： 在路由之前調用app.use(cors())
express接口案例代碼
-
// 導入 express 模塊
-
const express = require('express')
-
-
// 創建 express 的服務器實例
-
const app = express()
-
-
// 導入中間件
-
const cors = require('cors')
-
// 配置中間件
-
app.use(cors())
-
-
// 配置解析表單數據的中間件
-
app.use(express.urlencoded({ extended: false }))
-
-
// 導入路由模塊（被單獨分離后導入）
-
const router = require('./apiRouter')
-
// 把路由模塊，注冊到 app 上
-
app.use('/api', router)
-
-
// 調用 app.listen 方法，指定端口號并啟動 web 服務器
-
app.listen(80, () => {
-
console.log('http://127.0.0.1')
-
})
apiRouter路由文件代碼：
-
const express = require('express');
-
const router = express.Router();
-
-
router.get('/get', (req, res) => {
-
const query = req.query;
-
res.send({
-
status: 0,
-
msg: 'get請求成功',
-
data: query
-
})
-
})
-
router.post('/post', (req, res) => {
-
// const body = req.body; //獲取客戶端請求的數據
-
res.send({
-
status: 0,
-
msg: 'post請求成功',
-
data: req.body
-
})
-
})
-
module.exports = router;
在終端中運行express接口代碼后打開index.html文件并點擊get及post按鈕得到請求結果：
創建 JSONP 接口的注意事項
如果項目中已經配置了 CORS 跨域資源共享，為了防止沖突，必須在配置 CORS 中間件之前聲明 JSONP 的接口
否則 JSONP 接口會被處理成開啟了 CORS 的接口
實現步驟：
（1）獲取客戶端發送過來的回調函數的名字
（2）得到要通過 JSONP 形式發送給客戶端的數據
（3）根據前兩步得到的數據，拼接出一個函數調用的字符串
（4）把上一步拼接得到的字符串，響應給客戶端的 <script> 標簽進行解析執行
案例代碼如下：
-
//導入express模塊
-
const express = require('express');
-
//創建express服務器實例
-
const app = express();
-
//掛載路由
-
app.get('/jsonp', (req, res) => {
-
// 通過解構req.query客戶端通過查詢字符串的形式發送到客戶端的參數fn
-
const { callback } = req.query
-
//在服務器端定義一個obj對象
-
const obj = {
-
uname: 'zjj',
-
age: '18'
-
}
-
//obj對象轉為res.send可處理的字符串形式后從服務器端相應回調函數至客戶端
-
res.send(`${callback}(${JSON.stringify(obj)})`)
-
})
-
app.listen(80, () => {
-
console.log('http://127.0.0.1');
-
})
創建jsonp.html客戶端來接收服務器端響應過來的回調函數，代碼如下：
url中callback=fn為客戶端發送請求攜帶的參數 既服務器端中的req.query.callback
-
<script>
-
function fn(res) {
-
console.log(res);
-
}
-
</script>
-
<script src="http://127.0.0.1/jsonp?callback=fn"></script>
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn