前端中跨域及解決措施示例詳解
更新時間：2025年02月28日 10:25:06 作者：6230_
這篇文章主要介紹了前端中跨域及解決措施的相關(guān)資料,主要方法包括JSONP、CORS和服務(wù)器代理跨域,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
1、跨越介紹
1.1、概念
概念：跨域是瀏覽器的同源策略產(chǎn)生的一個限制同源策略：- 瀏覽器制定的一個
安全策略，這個安全策略的主要目標是：不讓我們向別人的服務(wù)器發(fā)起請求 同源策略要求：同域名、同端口號、同協(xié)議，不符合同源策略的，瀏覽器為了安全會阻止這個請求
- 瀏覽器制定的一個
1.2、如何界定服務(wù)器是自己的還是別人的
- 查看請求的
"協(xié)議/端口/域名" 這3個內(nèi)容和請求源(當前打開頁面的"協(xié)議/端口/域名")是否相同 - 如果三者有一者不同，那么就會觸發(fā)
跨域錯誤
1.3、常見源
- 常見源1：
file:///E:/——沒有域名/端口 => 本地磁盤的路徑 - 常見源2：
http://127.0.0.1:5500/——協(xié)議是：http，域名是：127.0.0.1，端口是：5500 => 在服務(wù)器打開的路徑
1.4、如何解決跨域錯誤
- 注意：如果
服務(wù)端不想給跨域請求數(shù)據(jù)，那么我們解決不了跨域問題 跨域這件事其實主導(dǎo)者還是在服務(wù)端，如果服務(wù)端允許我們的跨域請求，那么就可以發(fā)起跨域請求，反之就不能發(fā)起請求
1.5、示例跨域錯誤
let btn = document.querySelector("#btn");
btn.addEventListener( "click" , function(){
// 演示：向百度發(fā)起一個ajax請求 => 這里的演示只要是和當前源的協(xié)議、端口、域名不一致的即可
fetch("https://www.baidu.com")
// 報錯：報錯信息中的No 'Access-Control-Allow-Origin'這段話表示ajax請求是違背了同源策略的，此時不可以發(fā)送ajax請求
})
2、解決跨域——JSONP
2.1、解釋
把原本的
ajax請求——替換成：在"script"標簽的"src"屬性發(fā)起請求
示例：<script src="https://www.baidu.com"><script>——向百度發(fā)起請求
解釋：- 如果我們定義了一個帶有src屬性的script標簽，那么瀏覽器就會根據(jù)script標簽的src屬性發(fā)起請求
- 注意1：我們當前發(fā)起的請求，它的響應(yīng)數(shù)據(jù)會被當成js來執(zhí)行！要求響應(yīng)數(shù)據(jù)必須符合js代碼執(zhí)行標準，是有意義的js代碼 => 告知服務(wù)端給我們返回的響應(yīng)數(shù)據(jù)必須是有意義的js代碼
- 注意2：我們當前發(fā)起的請求，請求方式只能是get => 因為script標簽發(fā)出去的請求沒有什么危害性，也算是ajax請求的"閹割版"
和ajax請求的區(qū)別：- 發(fā)起的請求響應(yīng)會被當作js代碼立即執(zhí)行，而ajax返回的請求響應(yīng)是被放在對象中的一條屬性
- ajax可以任意使用請求方式
查看請求是否發(fā)送：- 在網(wǎng)絡(luò)請求部分將過濾分頁調(diào)成js
- 左側(cè)的請求圖標是黃色的——把百度的代碼當成js來解釋
2.2、注意
- 當前的
script標簽請求會在頁面打開后就立即發(fā)送 - 這會導(dǎo)致有了響應(yīng)數(shù)據(jù)后，如果沒有全局函數(shù)會報錯，所以這種請求一定要放在全局函數(shù)創(chuàng)建后，再進行請求發(fā)起！
2.3、面試
問題：jsonp原理回答：動態(tài)創(chuàng)建script標簽，src屬性指向沒有跨域限制
2.4、示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo-1</title>
</head>
<body>
<!-- 1、先設(shè)置好回調(diào)函數(shù) -->
<script>
function callback(data){
console.log(data);
}
</script>
<!-- 2、發(fā)送jsonp請求并攜帶數(shù)據(jù) -->
<script src="https://www.baidu.com/sugrec?prod=pc&from=pc_web&wd=你好&cb=callback"></script>
</body>
</html>
3、解決跨域——CORS跨域
3.1、簡述概念
CORS跨域：- CORS是在服務(wù)端返回響應(yīng)的時候，向響應(yīng)頭中添加可以跨域訪問的響應(yīng)頭信息實現(xiàn)的 => 在服務(wù)端添加響應(yīng)頭實現(xiàn)的跨域方案
- 在條件允許的情況下，盡可能的使用CORS的跨域會比較好
問題：向目標服務(wù)器發(fā)起請求：http://localhost:8889報錯- 解釋：如果用當前頁面(open in default browser / live server)發(fā)起請求就會產(chǎn)生跨域問題，因為和目標服務(wù)器的路徑不一致
- 解決：
- 注意1：要先開啟測試服務(wù)器，再通過當前頁面向測試服務(wù)器發(fā)起請求 => 另外：使用CORS跨域的時候，服務(wù)端必須是我們自己寫的 (或者跟后端溝通，讓他改一下響應(yīng)頭的配置項)，因為要能改服務(wù)端的代碼才可以，用別人的端口實現(xiàn)CORS跨域不太可能
- 我們需要配置服務(wù)器響應(yīng)頭，才可以實現(xiàn)跨域的數(shù)據(jù)訪問
- 注意2：如果服務(wù)端啟用了CORS跨域，我們可以使用所有前端的ajax技術(shù)
3.2、示例客戶端代碼
// 1、獲取頁面元素的dom對象
let btn = document.getElementById("btn");
// 3、編寫事件處理函數(shù)
async function sendRequest(){
let response = await fetch("http://localhost:8889");
let data = await response.json();
console.log( data ); // 在沒有設(shè)置響應(yīng)頭時，點擊發(fā)送請求是報錯的
}
// 2、給元素添加事件
btn.addEventListener("click" , sendRequest)
// 4、設(shè)置服務(wù)器響應(yīng)頭步驟——這里可以用小伙伴們自己得服務(wù)端代碼，寫入這行代碼即可
// 寫入：res.setHeader("Access-Control-Allow-Origin" , "*")即可
3.3、示例服務(wù)端代碼
let http = require("http");
let chalk = require("chalk");
let server = http.createServer( ( req , res ) => {
// 注意：在這里使用響應(yīng)頭添加工具，添加CORS跨域響應(yīng)頭
// res.setHeader( 響應(yīng)頭key"Access-Control-Allow-Origin" , 響應(yīng)頭value"*" );
// 配置項 => "Access...：允許哪一個地址去進行跨域請求"
// 地址信息 => "*"：所有地址都行；也可以寫 http://127.0.0.1:5500/這種，但是這種完整的路徑需要攜帶協(xié)議(http/其它協(xié)議)
res.setHeader("Access-Control-Allow-Origin" , "*");
// 響應(yīng)數(shù)據(jù)
let data = {
"message": "我已經(jīng)接受到了你的請求, 這是我給你的回應(yīng), 我是一個 json 格式",
"tips": "后端返回給前端的數(shù)據(jù)",
"code": 1,
}
// 響應(yīng)頭設(shè)置（否則無法正常顯示中文）
res.setHeader("Content-Type" , "text/html;charset=utf8");
// 將數(shù)據(jù)寫入響應(yīng)體
res.write( JSON.stringify(data) );
// 結(jié)束響應(yīng)
res.end();
})
server.listen(8889 , ()=>{
const port = server.address().port
const text =
`
恭喜你，服務(wù)器啟動成功啦 ${ chalk.cyan('^_^') }!
目前正在監(jiān)聽 ${ chalk.red(port) } 端口號!
基準地址: ${ chalk.red('http://localhost:' + port) }
`
console.log(text)
});
4、解決跨域——服務(wù)器代理跨域
4.1、簡述概念
服務(wù)器代理跨域就是在本地開啟一個服務(wù)器，代理發(fā)送我們的請求- 可以實現(xiàn)跨域的原因是：因為同源策略是給瀏覽器設(shè)置的，對服務(wù)器不生效，所以我們的服務(wù)器代理跨域是不受同源策略限制的
4.2、示例客戶端代碼
<body>
<button id="btn">向百度接口發(fā)起請求</button>
<button id="btn2">向代理服務(wù)器發(fā)起請求</button>
<script>
// 測試是否可以直接向百度發(fā)起請求 => 不能，會報錯
let btn = document.getElementById("btn");
function sendRequest(){
fetch("https://www.baidu.com/sugrec")
}
btn.addEventListener("click" , sendRequest )
// 根據(jù)代理服務(wù)器(proxy-server.js)——測試代理請求
let btn2 = document.getElementById("btn2");
async function sendProxyRequest(){
// 1、此時我們的代理請求就是 => 給本地的代理服務(wù)器發(fā)請求，具體服務(wù)器怎么做那是服務(wù)器的事了
let response = await fetch("http://localhost:8890"); // 2、給我們自己配置的本地服務(wù)器發(fā)送請求，讓它替我們向百度發(fā)請求
// 3、注意：如果本地服務(wù)器沒設(shè)置cors跨域的話，一樣會報錯，所以不要忘記在proxy-server.js配置響應(yīng)頭，先實現(xiàn)能給自己的服務(wù)器發(fā)送請求，再讓它代替我們發(fā)請求
let data = await response.json();
console.log( data );
}
btn2.addEventListener("click" , sendProxyRequest )
</script>
</body>
4.3、示例服務(wù)端代碼
let http = require("http");
let chalk = require("chalk");
let axios = require("axios");
let server = http.createServer(async ( req , res ) => {
// 代理服務(wù)器配置cors跨域
res.setHeader("Access-Control-Allow-Origin" , "*");
// 配置請求信息
let options = {
params : {
prod : "pc",
from : "pc_web",
wd : "hello world" ,
// !發(fā)起的請求可以不帶cb => 因為這是服務(wù)器端
}
}
// 使用axios根據(jù)路徑進行請求配置:
let { data } = await axios("https://www.baidu.com/sugrec" , options )
// 響應(yīng)頭設(shè)置 => 否則無法正常顯示中文
// 響應(yīng)頭設(shè)置 => 否則無法正常顯示中文
res.setHeader("Content-Type" , "text/html;charset=utf8");
// 將數(shù)據(jù)寫入響應(yīng)體
res.write( JSON.stringify(data) );
// 結(jié)束響應(yīng)
res.end();
})
server.listen(8890 , ()=>{
const port = server.address().port
const text = `
恭喜你, 服務(wù)器啟動成功啦 ${ chalk.cyan('^_^') } !
目前正在監(jiān)聽 ${ chalk.red(port) } 端口號 !
基準地址: ${ chalk.red('http://localhost:' + port) }
`
console.log(text)
});
4.4、服務(wù)器代理原理示例圖
總結(jié)
到此這篇關(guān)于前端中跨域及解決的文章就介紹到這了,更多相關(guān)前端跨域及解決內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了JS實現(xiàn)玩轉(zhuǎn)風(fēng)車，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
非?？岬膉s圖形漸隱導(dǎo)航菜單欄...2007-08-08
這篇文章主要為大家詳細介紹了用JS編寫選項卡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細介紹了JavaScript快速實現(xiàn)日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
本文主要介紹了TypeScript中JSX的使用小結(jié), 使用JSX可以獲得完整的類型檢查和智能提示,從而提升開發(fā)效率和代碼質(zhì)量,感興趣的可以了解一下2025-10-10
在Threejs中類似于我們現(xiàn)實世界,物體顯示的顏色是由物體本身的顏色及光照的顏色相互疊加而得到的,這篇文章主要給大家介紹了關(guān)于threejs太陽光與陰影效果的相關(guān)資料,需要的朋友可以參考下2022-04-04
下面小編就為大家?guī)硪黄仙Ｕ凧avascript中的原型和this指針。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-10-10
在2016年10月11日facebook 公開了新的javascript包管理工具 yarn, 用來替代目前被廣泛使用的npm(nodejs 自帶的包管理工具)，本文將介紹yarn工具帶來的優(yōu)點和使用入門，以及對比npm解決了什么問題，帶來哪些便利。有需要的朋友們下面來一起看看吧。2016-12-12
BootStrap modal模態(tài)彈窗使用小結(jié)
這篇文章主要為大家詳細介紹了BootStrap modal模態(tài)彈窗使用小結(jié),具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了javascript如何實現(xiàn)暫停功能,，Javascript本身沒有暫停功能,同時vbscript也不能使用doEvents，故編寫此函數(shù)實現(xiàn)此功能， 需要的朋友可以參考下2015-11-11