在我們了解JSONP 和 CORS 之前我們先明確一下：
我們為什么要使用cors和jsonp呢？
實際上，cors和jsonp都是用于解決跨域問題，當兩個頁面的協議、域名、埠號中有一個不一致時就存在了跨域，一旦出現跨域，瀏覽器發送跨域請求后，請求回來的資料都會被瀏覽器所攔截，準備一張圖給大家看看：
核心點：如何實作跨域資料請求？(?????)
現下實作跨域資料請求，最主要的兩種解決方案分別是 JSONP 和 CORS ，
什么是JSONP(???)
JSONP (JSON with Padding) 是 JSON 的一種“使用模式”，可用于解決主流瀏覽器的跨域資料訪問的問題，
JSONP的實作原理(???)
-
概念：瀏覽器端通過
<script>標簽的src屬性，請求服務器上的資料，同時，服務器回傳一個函式的呼叫，這種請求資料的方式叫做JSONP -
特點：
JSONP 不屬于真正的 Ajax 請求，因為它沒有使用 XMLHttpRequest 這個物件
JSONP 僅支持 GET 請求，不支持 POST、PUT、DELETE 等請求
什么是CORS(?????)
-
CORS(跨域資源共享) 由一系列HTTP回應頭組成，這些HTTP回應頭決定瀏覽器 是否阻止前端 JS 代碼跨域獲取資源 -
瀏覽器的同源安全策略默認會阻止網頁“跨域”獲取資源，但如果介面服務器配置了 CORS 相關的 HTTP 回應頭，就可以解除瀏覽器端的跨域訪問限制
下面分別向大家演示通過CORS和JSONP實作跨域的案例：
一、通過CORS中間件解決跨域問題 ：
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中間件解決跨域問題 ：
創建 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/308871.html
標籤：其他
上一篇：Java專案:個人博客系統(java+SSM+Mysql+Servlet+JavaWeb)
下一篇：快速學會Express 路由