欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

前端中跨域及解決措施示例詳解

 更新時間：2025年02月28日 10:25:06   作者：6230_  
這篇文章主要介紹了前端中跨域及解決措施的相關資料,主要方法包括JSONP、CORS和服務器代理跨域,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1、跨越介紹

1.1、概念

  • 概念：跨域是瀏覽器的同源策略產(chǎn)生的一個限制
  • 同源策略：
    • 瀏覽器制定的一個安全策略，這個安全策略的主要目標是：不讓我們向別人的服務器發(fā)起請求
    • 同源策略要求：同域名、同端口號、同協(xié)議，不符合同源策略的，瀏覽器為了安全會阻止這個請求

1.2、如何界定服務器是自己的還是別人的

  • 查看請求的 "協(xié)議/端口/域名" 這3個內容和請求源(當前打開頁面的"協(xié)議/端口/域名")是否相同
  • 如果三者有一者不同，那么就會觸發(fā)跨域錯誤

1.3、常見源

  • 常見源1：file:///E:/——沒有域名/端口 => 本地磁盤的路徑
  • 常見源2：http://127.0.0.1:5500/——協(xié)議是：http，域名是：127.0.0.1，端口是：5500 => 在服務器打開的路徑

1.4、如何解決跨域錯誤

  • 注意：如果服務端不想給跨域請求數(shù)據(jù)，那么我們解決不了跨域問題
  • 跨域這件事其實主導者還是在服務端，如果服務端允許我們的跨域請求，那么就可以發(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ā)起的請求，它的響應數(shù)據(jù)會被當成js來執(zhí)行！要求響應數(shù)據(jù)必須符合js代碼執(zhí)行標準，是有意義的js代碼 => 告知服務端給我們返回的響應數(shù)據(jù)必須是有意義的js代碼
    • 注意2：我們當前發(fā)起的請求，請求方式只能是get => 因為script標簽發(fā)出去的請求沒有什么危害性，也算是ajax請求的"閹割版"
  • 和ajax請求的區(qū)別：
    • 發(fā)起的請求響應會被當作js代碼立即執(zhí)行，而ajax返回的請求響應是被放在對象中的一條屬性
    • ajax可以任意使用請求方式
  • 查看請求是否發(fā)送：
    • 在網(wǎng)絡請求部分將過濾分頁調成js
    • 左側的請求圖標是黃色的——把百度的代碼當成js來解釋

2.2、注意

  • 當前的script標簽請求會在頁面打開后就立即發(fā)送
  • 這會導致有了響應數(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ù) -->
    <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是在服務端返回響應的時候，向響應頭中添加可以跨域訪問的響應頭信息實現(xiàn)的 => 在服務端添加響應頭實現(xiàn)的跨域方案
    • 在條件允許的情況下，盡可能的使用CORS的跨域會比較好
  • 問題：向目標服務器發(fā)起請求：http://localhost:8889報錯
    • 解釋：如果用當前頁面(open in default browser / live server)發(fā)起請求就會產(chǎn)生跨域問題，因為和目標服務器的路徑不一致
    • 解決：
      • 注意1：要先開啟測試服務器，再通過當前頁面向測試服務器發(fā)起請求 => 另外：使用CORS跨域的時候，服務端必須是我們自己寫的 (或者跟后端溝通，讓他改一下響應頭的配置項)，因為要能改服務端的代碼才可以，用別人的端口實現(xiàn)CORS跨域不太可能
      • 我們需要配置服務器響應頭，才可以實現(xiàn)跨域的數(shù)據(jù)訪問
      • 注意2：如果服務端啟用了CORS跨域，我們可以使用所有前端的ajax技術

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 ); // 在沒有設置響應頭時，點擊發(fā)送請求是報錯的
        }
// 2、給元素添加事件
        btn.addEventListener("click" , sendRequest)

// 4、設置服務器響應頭步驟——這里可以用小伙伴們自己得服務端代碼，寫入這行代碼即可
        // 寫入：res.setHeader("Access-Control-Allow-Origin" , "*")即可

3.3、示例服務端代碼

let http  = require("http");
let chalk = require("chalk");
let server = http.createServer( ( req , res ) => {
    // 注意：在這里使用響應頭添加工具，添加CORS跨域響應頭  
    // res.setHeader( 響應頭key"Access-Control-Allow-Origin" , 響應頭value"*" );
    // 配置項 => "Access...：允許哪一個地址去進行跨域請求"
    // 地址信息 => "*"：所有地址都行；也可以寫 http://127.0.0.1:5500/這種，但是這種完整的路徑需要攜帶協(xié)議(http/其它協(xié)議)
    res.setHeader("Access-Control-Allow-Origin" , "*"); 
 
    // 響應數(shù)據(jù)
    let data = {
        "message": "我已經(jīng)接受到了你的請求, 這是我給你的回應, 我是一個 json 格式",
        "tips": "后端返回給前端的數(shù)據(jù)",
        "code": 1,
    }
    // 響應頭設置（否則無法正常顯示中文）
    res.setHeader("Content-Type" , "text/html;charset=utf8");
    // 將數(shù)據(jù)寫入響應體
    res.write( JSON.stringify(data) );
    // 結束響應
    res.end();
})

server.listen(8889 , ()=>{
  const port = server.address().port
  const text = 
  `
    恭喜你，服務器啟動成功啦 ${ chalk.cyan('^_^') }!
    目前正在監(jiān)聽 ${ chalk.red(port) } 端口號!
    基準地址: ${ chalk.red('http://localhost:' + port) }
  `
  console.log(text)
});

4、解決跨域——服務器代理跨域

4.1、簡述概念

  • 服務器代理跨域就是在本地開啟一個服務器，代理發(fā)送我們的請求
  • 可以實現(xiàn)跨域的原因是：因為同源策略是給瀏覽器設置的，對服務器不生效，所以我們的服務器代理跨域是不受同源策略限制的

4.2、示例客戶端代碼

<body>
    <button id="btn">向百度接口發(fā)起請求</button>
    <button id="btn2">向代理服務器發(fā)起請求</button>

<script>
    // 測試是否可以直接向百度發(fā)起請求 => 不能，會報錯
        let btn = document.getElementById("btn");
        function sendRequest(){
            fetch("https://www.baidu.com/sugrec")
        }
        btn.addEventListener("click" , sendRequest )

    // 根據(jù)代理服務器(proxy-server.js)——測試代理請求
        let btn2 = document.getElementById("btn2");
        async function sendProxyRequest(){
            // 1、此時我們的代理請求就是 => 給本地的代理服務器發(fā)請求，具體服務器怎么做那是服務器的事了 
            let response = await fetch("http://localhost:8890"); // 2、給我們自己配置的本地服務器發(fā)送請求，讓它替我們向百度發(fā)請求
                   // 3、注意：如果本地服務器沒設置cors跨域的話，一樣會報錯，所以不要忘記在proxy-server.js配置響應頭，先實現(xiàn)能給自己的服務器發(fā)送請求，再讓它代替我們發(fā)請求
            let data = await response.json();
            console.log( data );
        }
        btn2.addEventListener("click" , sendProxyRequest )
</script>
</body>

4.3、示例服務端代碼

let http  = require("http");
let chalk = require("chalk");
let axios = require("axios");

let server = http.createServer(async ( req , res ) => {
    // 代理服務器配置cors跨域
    res.setHeader("Access-Control-Allow-Origin" , "*"); 

    // 配置請求信息
    let options = {
      params : {
        prod : "pc",
        from : "pc_web", 
        wd : "hello world" ,
        // !發(fā)起的請求可以不帶cb => 因為這是服務器端
      }
    }
    // 使用axios根據(jù)路徑進行請求配置: 
    let { data } = await axios("https://www.baidu.com/sugrec" , options )
    // 響應頭設置 => 否則無法正常顯示中文
    // 響應頭設置 => 否則無法正常顯示中文
    res.setHeader("Content-Type" , "text/html;charset=utf8");
    // 將數(shù)據(jù)寫入響應體 
    res.write( JSON.stringify(data) );
    // 結束響應
    res.end();
})

server.listen(8890 , ()=>{
  const port = server.address().port
  const text = `
    恭喜你, 服務器啟動成功啦 ${ chalk.cyan('^_^') } !
    目前正在監(jiān)聽 ${ chalk.red(port) } 端口號 !
    基準地址: ${ chalk.red('http://localhost:' + port) }
  `
  console.log(text)
});

4.4、服務器代理原理示例圖

總結 

到此這篇關于前端中跨域及解決的文章就介紹到這了,更多相關前端跨域及解決內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論