Anhand von Abbildungen und Texten erfahren Sie, wie Sie die 302-Schnittstelle simulieren und verschiedene Lösungen für Axios und Fetch implementieren, um nach dem 302-Statuscode in js zu springen. Axios und Fetch reagieren erfolgreich auf Intercept 302

Language 2023-12-17 08:00:48 views: null

Rekapitulieren

  • In der täglichen Arbeit verwenden wir Fetch oder Axios, um Anforderungen zum Abrufen von Daten zu initiieren. Wenn wir jedoch auf besondere Anforderungen stoßen, erhalten wir nach Verwendung verschiedener Bibliotheken unterschiedliche Ergebnisse, z. B. die Statuscodes 302 und 308. Wie sollten wir also damit umgehen? damit? Was ist mit diesen beiden Situationen?

Im Folgenden werde ich Ihnen Schritt für Schritt beibringen, wie Sie es umsetzen:

  • Wie kann ich mit mehreren Lösungen den Front-End-Code und die 302-Back-End-Schnittstelle implementieren, um einen Seitensprung zu erreichen?
  • Wie gehe ich mit 302 um, wenn fetch eine GET- oder POST-Anfrage sendet? Oder wie kann Intercept 302 abgerufen werden?
  • Welche Lösungen gibt es für Axios, um als Reaktion 302-Statuscodes abzufangen? Wie erreichen?

Grundlegende Vorbereitung der Umgebung

Starten Sie ein einfaches NodeJS-Backend mit einfachem Code

Projekt initialisieren
npm init
Abhängigkeiten installieren
npm install express cors --save
Simulieren Sie mehrere 302-Anfragen

Erstellen Sie die Datei app.js im Stammverzeichnis. Wir simulieren einige 302-Anfragen


var express = require("express");
var app = express();
const cors = require("cors");
//跨域请求cors
app.use(
  cors({
    origin: "*",
    credentials: true,
  })
);
// code 200 请求
app.get("/success", function (req, res) {
  res.send("ok");
});
app.post("/success", function (req, res) {
  res.send("ok");
});
// code 500 请求
app.get("/error500", function (req, res) {
  res.sendStatus(500);
});
const urlInfo = {
  baidu: "https://www.baidu.com/",
  error: "http://localhost:3002/error500", // 这个接口会返回状态码500
  notFound: "http://localhost:3002/notfound", // 根本就没有这个接口
  success: "http://localhost:3002/success", // 200
};
app.get("/redirect-success", function (req, res) {
  res.redirect(302, urlInfo.success);
});
app.post("/redirect-success", function (req, res) {
  res.redirect(302, urlInfo.success);
});
app.get("/redirect-baidu", function (req, res) {
  res.redirect(302, urlInfo.baidu);
});
app.post("/redirect-baidu", function (req, res) {
  res.redirect(302, urlInfo.baidu);
});
app.get("/redirect-error", function (req, res) {
  res.redirect(302, urlInfo.error);
});
app.post("/redirect-error", function (req, res) {
  res.redirect(302, urlInfo.error);
});
app.get("/redirect-not-found", function (req, res) {
  res.redirect(302, urlInfo.notFound);
});
app.post("/redirect-not-found", function (req, res) {
  res.redirect(302, urlInfo.notFound);
});


var http = app.listen(3002, "127.0.0.1", function () {
  var httpInfo = http.address();
  console.log(`创建服务${httpInfo.address}:${httpInfo.port}成功`);
});
Vorsichtsmaßnahmen
  • Für die folgenden Statuscodes habe ich nur 302 ausprobiert. Sie können den Backend-Code ändern, um andere Bedingungen zu testen~~

重定向状态码：
301: Dauerhaft verschoben
302: Gefunden
303: Andere anzeigen 308: Permanente Weiterleitung
307: Temporäre Weiterleitung

Starten Sie den HTTP-Dienst
node app.js

Oder verwenden Sie Supervisor, um Hot-Updates des serverseitigen Codes durchzuführen

So verwenden Sie Supervisor (es wird empfohlen, ihn zum Starten des Codes zu verwenden)
  • Offizielle npm-Dokumentation
  • Node Supervisor wird verwendet, um das Programm neu zu starten, wenn es abstürzt.
  • Es kann auch verwendet werden, um das Programm neu zu starten, wenn sich *.js-Dateien ändern.
npm install supervisor -g
supervisor app.js
Erfolgreich gestartet

Schnittstellentests

Frontend-Vorbereitung

Ich verwende hier Vue als Beispiel ~~, das gilt auch für andere Frameworks ~~

Projekt erstellen

npm create vue@latest

Abhängigkeiten herunterladen
cd 项目名
npm install
Startup-Projekt
npm run dev


Bereiten Sie die Basisseite vor
<script setup>

</script>

<template>
  <main class="main">
    <button>测试</button>
  </main>
</template>
<style scoped>
.main {
  display: flex;
  align-items: center;
  justify-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  margin-top: 20px;
}

button {
  font-size: 16px;
  display: block;
  margin-bottom: 15px;
  cursor: pointer;
  border: none;
  color: hsla(160, 100%, 37%, 1);
  padding: 10px;
  width: 300px;
}
</style>

Funktion 1: Wie verwende ich Front-End-Code + 302-Back-End-Schnittstelle, um einen Seitensprung zu erreichen?

Option 1 – window.location.assign (zur aktuellen Seite springen)

Wir fügen dem Projekt den folgenden Code hinzu

<script setup>
const urlInfo = {
  baidu: 'http://localhost:3002/redirect-baidu'
}
const toBaidu = () => {
  console.log(1)
  window.location.assign(urlInfo.baidu)
}
</script>

<template>
  <main class="main">
    <button @click="toBaidu">点击此处跳转百度</button>
  </main>
</template>
Option 2 – window.open (öffnen Sie eine neue Seite oder öffnen Sie die aktuelle Seite, Sie können die Parameter selbst steuern)

Der Kerncode lautet wie folgt: (Der detaillierte Code wird später eingefügt)

 window.open(urlInfo.baidu, '_blank');
Option 3 – window.location.href

Der Kerncode lautet wie folgt: (Der detaillierte Code wird später eingefügt)

 window.open(urlInfo.baidu, '_blank');
Gesamtcode der Funktion 1
<script setup>
const urlInfo = {
  baidu: 'http://localhost:3002/redirect-baidu'
}
const toBaidu1 = () => {
  window.location.assign(urlInfo.baidu)
}
const toBaidu2 = () => {
  window.open(urlInfo.baidu, '_blank');
}
const toBaidu3 = () => {
  window.location.href = urlInfo.baidu
}
</script>

<template>
  <main class="main">
    <button @click="toBaidu1">点击此处跳转百度-1</button>
    <button @click="toBaidu2">点击此处跳转百度-2</button>
    <button @click="toBaidu3">点击此处跳转百度-3</button>
  </main>
</template>
<style scoped>
.main {
  display: flex;
  align-items: center;
  justify-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  margin-top: 20px;
}

button {
  font-size: 16px;
  display: block;
  margin-bottom: 15px;
  cursor: pointer;
  border: none;
  color: hsla(160, 100%, 37%, 1);
  padding: 10px;
  width: 300px;
}
</style>

Funktion 2: Wie gehe ich mit 302 um, wenn fetch eine GET- oder POST-Anfrage sendet? Oder wie kann Intercept 302 abgerufen werden?

Wir verwenden mehrere simulierte URLs, um verschiedene Situationen anzuzeigen, und basierend auf den zurückgegebenen Ergebnissen weiß dann jeder, wie er mit der 302-Situation umgehen soll.`

Fall 1:
<script setup>
const urlInfo = {
  baidu: 'http://localhost:3002/redirect-baidu',
  error: 'http://localhost:3002/redirect-error',
  notFound: 'http://localhost:3002/redirect-not-found',
}
const currentUrl = urlInfo.baidu
const fetchGet = () => {
  fetch(currentUrl).then(_ =>{
    console.log('fetch get ---then--- current url:', currentUrl)
    console.log(_)
  }).catch(e=>{
    console.log('fetch get ---catch--- current url:', currentUrl)
    console.log(e)
  })
}
const fetchPost = () => {
  fetch(currentUrl,{method:'post'}).then(_ =>{
    console.log('fetch post ---then--- current url:', currentUrl)
    console.log(_)
  }).catch(e=>{
    console.log('fetch post ---catch--- current url:', currentUrl)
    console.log(e)
  })
}

</script>

<template>
  <main class="main">
    <button @click="fetchGet">Fetch-Get-302</button>
    <button @click="fetchPost">Fetch-Post-302</button>
  </main>
</template>
<style scoped>
.main {
  display: flex;
  align-items: center;
  justify-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  margin-top: 20px;
}

button {
  font-size: 16px;
  display: block;
  margin-bottom: 15px;
  cursor: pointer;
  border: none;
  color: hsla(160, 100%, 37%, 1);
  padding: 10px;
  width: 300px;
}
</style>


Fall 2:

URL wechseln

<script setup>
const urlInfo = {
  baidu: 'http://localhost:3002/redirect-baidu',
  error: 'http://localhost:3002/redirect-error',
  notFound: 'http://localhost:3002/redirect-not-found',
}
const currentUrl = urlInfo.error
const fetchGet = () => {
  fetch(currentUrl).then(_ =>{
    console.log('fetch get ---then--- current url:', currentUrl)
    console.log(_)
  }).catch(e=>{
    console.log('fetch get ---catch--- current url:', currentUrl)
    console.log(e)
  })
}
const fetchPost = () => {
  fetch(currentUrl,{method:'post'}).then(_ =>{
    console.log('fetch post ---then--- current url:', currentUrl)
    console.log(_)
  }).catch(e=>{
    console.log('fetch post ---catch--- current url:', currentUrl)
    console.log(e)
  })
}

</script>

<template>
  <main class="main">
    <button @click="fetchGet">Fetch-Get-302</button>
    <button @click="fetchPost">Fetch-Post-302</button>
  </main>
</template>
<style scoped>
.main {
  display: flex;
  align-items: center;
  justify-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  margin-top: 20px;
}

button {
  font-size: 16px;
  display: block;
  margin-bottom: 15px;
  cursor: pointer;
  border: none;
  color: hsla(160, 100%, 37%, 1);
  padding: 10px;
  width: 300px;
}
</style>


Lassen Sie uns diese Situation analysieren. Die 302-Umleitungs-URL ist die URL, die 500 zurückgibt. Zu diesem Zeitpunkt können wir das umgeleitete Ergebnis erhalten. Zu diesem Zeitpunkt haben wir eine Möglichkeit, damit umzugehen ~

Fall 3:

URL wechseln

<script setup>
const urlInfo = {
  baidu: 'http://localhost:3002/redirect-baidu',
  error: 'http://localhost:3002/redirect-error',
  notFound: 'http://localhost:3002/redirect-not-found',
}
const currentUrl = urlInfo.notFound
const fetchGet = () => {
  fetch(currentUrl).then(_ =>{
    console.log('fetch get ---then--- current url:', currentUrl)
    console.log(_)
  }).catch(e=>{
    console.log('fetch get ---catch--- current url:', currentUrl)
    console.log(e)
  })
}
const fetchPost = () => {
  fetch(currentUrl,{method:'post'}).then(_ =>{
    console.log('fetch post ---then--- current url:', currentUrl)
    console.log(_)
  }).catch(e=>{
    console.log('fetch post ---catch--- current url:', currentUrl)
    console.log(e)
  })
}

</script>

<template>
  <main class="main">
    <button @click="fetchGet">Fetch-Get-302</button>
    <button @click="fetchPost">Fetch-Post-302</button>
  </main>
</template>
<style scoped>
.main {
  display: flex;
  align-items: center;
  justify-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  margin-top: 20px;
}

button {
  font-size: 16px;
  display: block;
  margin-bottom: 15px;
  cursor: pointer;
  border: none;
  color: hsla(160, 100%, 37%, 1);
  padding: 10px;
  width: 300px;
}
</style>

Fall 4:

Ändern Sie die URL auf 200

const urlInfo = {
  baidu: 'http://localhost:3002/redirect-baidu',
  error: 'http://localhost:3002/redirect-error',
  notFound: 'http://localhost:3002/redirect-not-found',
  success: 'http://localhost:3002/redirect-success',
}
const currentUrl = urlInfo.success


Zusammenfassen
  • Wenn die Ziel-URL der 302-Umleitung mit Fetch domänenübergreifend ist, können wir zu diesem Zeitpunkt die spezifischen Informationen der Anforderung nicht abrufen und können nur das Fehlerergebnis in Catch abrufen.
  • Bei Verwendung von Fetch gibt die Ziel-URL der 302-Umleitung den Statuscode 200, 404, 500 zurück. Über res.redirected können wir zu diesem Zeitpunkt genau erkennen, dass es sich bei der Schnittstelle um eine Weiterleitung handelt, und die genaue Weiterleitungs-URL über res.url abrufen, die von zurückgegeben wird Backend-Schnittstelle.
  • Zusammenfassend lässt sich sagen, dass wir, wenn die Umleitungsziel-URL normal ist, mit Fetch erfolgreich reagieren, den Statuscode 302 abfangen und die anschließende logische Verarbeitung durchführen können, da die CORS-Situation sehr einfach zu handhaben ist und die Verwendung anderer Konfigurationen wie Proxys vollständig möglich ist Vermeiden Sie dies. Bedingung.

Funktion 3: Wie gehe ich mit 302 um, wenn Axios eine GET- oder POST-Anfrage sendet? Welche Lösungen gibt es für Axios, um als Reaktion 302-Statuscodes abzufangen? Wie erreichen?

Abhängigkeiten herunterladen
 npm i axios --save
Schreiben Sie einfachen Code
<script setup>
import axios from 'axios';
const urlInfo = {
  success: 'http://localhost:3002/redirect-success',
  baidu: 'http://localhost:3002/redirect-baidu',
  error: 'http://localhost:3002/redirect-error',
  notFound: 'http://localhost:3002/redirect-not-found',
}
const currentUrl = urlInfo.success
const axiosGet = () => {
  axios.get(currentUrl).then(_ =>{
    console.log('axios get ---then--- current url:', currentUrl)
    console.log(_)
  }).catch(e=>{
    console.log('axios get ---catch--- current url:', currentUrl)
    console.log(e)
  })
}
const axiosPost = () => {
  axios.post(currentUrl,{method:'post'}).then(_ =>{
    console.log('axios post ---then--- current url:', currentUrl)
    console.log(_)
  }).catch(e=>{
    console.log('axios post ---catch--- current url:', currentUrl)
    console.log(e)
  })
}

</script>

<template>
  <main class="main">
    <button @click="axiosGet">Axios-Get-302</button>
    <button @click="axiosPost">Axios-Post-302</button>
  </main>
</template>
<style scoped>
.main {
  display: flex;
  align-items: center;
  justify-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  margin-top: 20px;
}

button {
  font-size: 16px;
  display: block;
  margin-bottom: 15px;
  cursor: pointer;
  border: none;
  color: hsla(160, 100%, 37%, 1);
  padding: 10px;
  width: 300px;
}
</style>
Fall 1:
const currentUrl = urlInfo.success

Fall 2:

Im domänenübergreifenden Fall wird Catch verwendet, und dann wird die Fehlermeldung „Netzwerkfehler“ angezeigt.

{
    "message": "Network Error",
    "name": "AxiosError",
    "stack": "AxiosError: Network Error\n    at XMLHttpRequest.handleError (http://localhost:5173/node_modules/.vite/deps/axios.js?v=e7c1b0b9:1451:14)",
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "method": "get",
        "url": "http://localhost:3002/redirect-baidu"
    },
    "code": "ERR_NETWORK",
    "status": null
}

Fall 3:

Fall 4:

abschließend

Lassen Sie uns die einheitlichen Rückgabedaten ausdrucken

{
    "message": "Request failed with status code 500",
    "name": "AxiosError",
    "stack": "AxiosError: Request failed with status code 500\n    at settle (http://localhost:5173/node_modules/.vite/deps/axios.js?v=e7c1b0b9:1204:12)\n    at XMLHttpRequest.onloadend (http://localhost:5173/node_modules/.vite/deps/axios.js?v=e7c1b0b9:1421:7)",
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*",
            "Content-Type": "application/json"
        },
        "method": "post",
        "url": "http://localhost:3002/redirect-error",
        "data": "{\"method\":\"post\"}"
    },
    "code": "ERR_BAD_RESPONSE",
    "status": 500
}
  • Wenn die Ziel-URL der 302-Umleitung mit Axios domänenübergreifend ist, können wir derzeit keine spezifischen Informationen zur Anforderung abrufen. Wir können nur das Fehlerergebnis und die Fehleranzeigeinformationen im Catch abrufen.
  • Bei Verwendung von Axios gibt die Ziel-URL der 302-Umleitung den Statuscode 200 zurück. Wir können res.request.responseURL mit res.config.url vergleichen, um genau zu wissen, ob die Schnittstelle zu diesem Zeitpunkt umgeleitet wird, und über die Backend-Schnittstelle Die zurückgegebene res. request.responseURL, und wenn es sich bei der umgeleiteten URL um eine HTML-Seite handelt, fügen wir sie hinzu, um zu ermitteln, ob der Typ headers["content-type"] text/html enthält, um die genaue umgeleitete URL zu erhalten.
  • Bei Verwendung von Axios gibt die Ziel-URL der 302-Umleitung den Statuscode 404.500 zurück. Wir können error.request.responseURL in Catch erfassen und mit error.config.url vergleichen, um genau zu wissen, ob die Schnittstelle zu diesem Zeitpunkt und durch den Fehler umgeleitet wird .request.responseURL wird von der Backend-Schnittstelle zurückgegeben. Wenn es sich bei der umgeleiteten URL um eine HTML-Seite handelt, fügen wir sie hinzu, um zu ermitteln, ob der Typ headers["content-type"] Text/HTML enthält, um die genaue umgeleitete URL zu erhalten.
  • Zusammenfassend lässt sich sagen, dass wir bei normaler Umleitungsziel-URL mit Axios erfolgreich auf das Abfangen des 302-Statuscodes und die anschließende logische Verarbeitung reagieren können, da die Cors-Situation sehr einfach zu handhaben ist und die Verwendung anderer Konfigurationen wie Proxys vollständig möglich ist Vermeiden Sie diesen Zustand.
Analysediagramm

Code
<script setup>
import axios from 'axios';
const urlInfo = {
    success: 'http://localhost:3002/redirect-success',
    baidu: 'http://localhost:3002/redirect-baidu',
    error: 'http://localhost:3002/redirect-error',
    notFound: 'http://localhost:3002/redirect-not-found',
}
const currentUrl = urlInfo.success
const consoleLog = (_, type) => {
   //  请注意下面仅限于重定向和原有url不会包含关系
    if(_.request.responseURL && _.request.responseURL.indexOf(_.config.url) === -1) {
        console.log(`------------------${type} --- 拦截302 ${_.config.method} 请求------------------`)
        console.log('请求URL：', _.config.url)
        console.log('重定向URL：', _.request.responseURL)
    }
    // 如果重定向的url是html页面的话，我们还可以加上判断headers["content-type"]类型是否包含text/html
}
const axiosGet = (url) => {
    axios.get(url).then(_ => {
        consoleLog(_, 'Then')
    }).catch(e => {
        consoleLog(e, 'Error')
    })
}
const axiosPost = (url) => {
    axios.post(url, { method: 'post' }).then(_ => {
        consoleLog(_, 'Then')
    }).catch(e => {
        consoleLog(e, 'Error')
    })
}

</script>

<template>
    <main class="main">
        <button @click="axiosGet(urlInfo.success)">Axios-Get-302-success</button>
        <button @click="axiosPost(urlInfo.success)">Axios-Post-302-success</button>

        <button @click="axiosGet(urlInfo.baidu)">Axios-Get-302-baidu</button>
        <button @click="axiosPost(urlInfo.baidu)">Axios-Post-302-baidu</button>

        <button @click="axiosGet(urlInfo.error)">Axios-Get-302-error</button>
        <button @click="axiosPost(urlInfo.error)">Axios-Post-302-error</button>

        <button @click="axiosGet(urlInfo.notFound)">Axios-Get-302-notFound</button>
        <button @click="axiosPost(urlInfo.notFound)">Axios-Post-302-notFound</button>
    </main>
</template>
<style scoped>
.main {
    display: flex;
    align-items: center;
    justify-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top: 20px;
}

button {
    font-size: 16px;
    display: block;
    margin-bottom: 15px;
    cursor: pointer;
    border: none;
    color: hsla(160, 100%, 37%, 1);
    padding: 10px;
    width: 300px;
}
</style>

Code-Repository

Das ist alles für heute~
  • Freunde, (￣ω￣(￣ω￣〃 (￣ω￣〃)ゝBis morgen~~
  • Bitte seid alle jeden Tag glücklich

Jeder ist herzlich eingeladen, im Artikel auf Bereiche hinzuweisen, die einer Korrektur bedürfen~
Das Lernen und die Win-Win-Zusammenarbeit nehmen kein Ende

Fügen Sie hier eine Bildbeschreibung ein

Begrüßen Sie die vorbeikommenden Brüder und Schwestern, um eine bessere Meinung abzugeben ~~

Supongo que te gusta

Origin blog.csdn.net/tangdou369098655/article/details/134771029
Recomendado
Clasificación
Diario
Más
2024-05-28(0)
2024-05-27(1)
2024-05-26(1)
2024-05-25(0)
2024-05-24(13)
2024-05-23(34)
2024-05-22(10)
2024-05-21(34)
2024-05-20(5)
2024-05-19(0)

Code World

© 2018 codetd.com