@Ajax

Stories List
@helloxiaoming

前端多種跨域方式實現原理詳解

跨域是我們在項目中經常遇到的,前後端數據交互經常碰到請求跨域,首先我們來想一下為什麼會有跨域這個詞的出現?本文帶你來探討一下以下幾個問題: 跨域是什麼? 為什麼要跨域? 跨域的幾種方式? ... 什麼是跨域? 跨域是指的瀏覽器不能執行其它網站的腳本,它是由瀏覽器的同源策略造成,是瀏覽器對JavaScript實施的安全限制。 跨域實際上指從一個域的網頁去請求另一個域的資源,比如:從 h

helloxiaoming Avatar

@helloxiaoming

Nickname helloxiaoming

@tosmile

記錄Ajax請求報415與404問題

問題描述與分析 今天幫同學旁邊同事解決了一個問題,問題是這樣的:我們有一個前後端未分離的項目agentBuy(Freemark+JQuery),同事想本地啓動agentBuy MVC服務(http:localhost:8001),聯調後端同事的本地啓動的web-inquiry服務(http://127.168.24.68:9366),直接聯調會有跨域問題,於是同事本地啓動網關服務webagent將

tosmile Avatar

@tosmile

Nickname 浪遏飛舟

@lpicker

Vue組件異步請求一定要在 mounted 回調執行?

背景與總結 先説結論: 有很多所謂的最佳實踐告訴你這個觀點,但其實這個觀點是非常片面的,甚至在大部分場景下他是錯的。 聲明一下: 本文通過幾個案例説明部分同行觀點的片面性,分析了這種觀點出現原因,涉及一點vue的渲染原理。最後給出作為個人為了避免困擾,可以採取的相對最近實踐(因人而異)。 分析 很多文章給出的理由是:mounted回調函數被調用的時候,組件已經被掛載到了DOM上,而比mounted

lpicker Avatar

@lpicker

Nickname lpicker

@_5bf4c360ce464

談談跨域那些事

瀏覽器中的HTTP請求 XMLHttpRequest XHR對象用於與服務器交互。通過XMLHttpRequest可以在不刷新頁面的情況下請求特定URL,獲取數據。 XMLHttpRequest在AJAX編程中被大量使用。 MDN文檔 Fetch Fetch API提供了一個獲取資源的接口(包括跨域請求) MDN文檔 AJAX Asynchronous JavaScript And XML,

_5bf4c360ce464 Avatar

@_5bf4c360ce464

Nickname 痞痞鰕

@wls1036

一次Ajax請求未攜帶cookie問題排查

背景 重寫一個登錄頁面,登錄接口是跨域接口,重寫的頁面登錄成功後進入頁面報錯,原因是請求後台接口未攜帶cookie,但是通過老頁面進行登錄,進入頁面後cookie可以正常攜帶,使用工具對比新老頁面登錄請求,request和response都是一樣。 解決 排除過以下可能性 在代碼中進行cookie刪除 兩個請求頭不一樣導致結果不一樣 系統時間設置錯誤,導致cookie過期 對比過兩邊的a

wls1036 Avatar

@wls1036

Nickname DQuery

@gqkmiss

JS Navigator.sendBeacon 可靠的、異步地向服務器發送數據

JS Navigator.sendBeacon 可靠的、異步地向服務器發送數據 前言 我們在上一篇頁面訪問頁面關閉數據上報的文章中使用了 sendBeacon 方法用來發送數據,上篇文章是簡單使用,那本篇文章我們就詳細瞭解下這個東西。 一、Navigator.sendBeacon 是什麼能做什麼? Navigator.sendBeacon 是一個用於發送少量數據到服務器的 API,尤其適用於在頁面

gqkmiss Avatar

@gqkmiss

Nickname 月恆

@huobaodejianpan

深入淺出: XML HttpRequest 入門指南

XML HttpRequest(XHR) 技術是構建動態、響應式網站的關鍵。這項技術使得網頁能在不重新加載整個頁面的情況下與服務器進行數據交互,極大地優化了用户的交互體驗。 定義 XML HttpRequest XML HttpRequest 是一種瀏覽器與服務器進行數據交換的 API。儘管它的名字包含 “XML”,XHR 實際上支持多種數據格式,如 JSON、HTML 和純文本等。初期,它主要用

huobaodejianpan Avatar

@huobaodejianpan

Nickname 火爆的鍵盤

@renzhongdaoyuan_59170ca258c53

封裝 uniapp 請求庫的最佳實踐

背景 在前端開發中,HTTP 請求是與服務器進行數據交互的核心手段。無論是獲取數據還是提交數據,前端應用幾乎都離不開 HTTP 請求。在 uniapp 中,uni.request 是官方提供的用於發起 HTTP 請求的基礎 API。然而,直接使用 uni.request 存在一些問題和不足,比如: 代碼冗餘:每次發起請求時都需要編寫類似的配置代碼,導致代碼重複。 缺乏統一管理:沒有統一的地方

renzhongdaoyuan_59170ca258c53 Avatar

@renzhongdaoyuan_59170ca258c53

Nickname 零一行者

@xingfudenaozhong

AJAX是如何憑一己之力提高前端程序員的工資水平的?

作者:阿達西 鏈接:juejin.cn/post/7395396352183009290 emmm,今天無意間聽到一個比較奇怪的信息,就是在很早之前,前端工程師只是一個切圖崽,而且工資也不是很高。説白了,就是沒含金量的工作。因為那時候的Web應用相對簡單,主要關注於頁面的靜態內容和基本的交互。所以前端開發的工作主要集中在HTML、CSS和基礎的JavaScript上。 但是自從AJAX出現後

xingfudenaozhong Avatar

@xingfudenaozhong

Nickname 幸福的鬧鐘

@liudamao

SpringBoot項目的html頁面使用axios進行get post請求

説明:本項目為SpringBoot項目而不是vue項目,本項目用於練習axios使用get及post請求 get和post請求都採用兩種方式進行配置,並註明易錯點 @[toc] 1.axios是什麼 Axios 是一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中,axios是對ajax的一種封裝,而jquery也是對ajax的一種封裝。 axio

liudamao Avatar

@liudamao

Nickname 劉大貓

@jianer

無感刷新token解決方案

在你的 axios 封裝文件中,你需要兩個外部變量來管理狀態: // 標記是否正在刷新 token 的“鎖” let isRefreshing = false; // 存儲因 token 失效而掛起的請求的“隊列” let requestQueue = []; 請求攔截器 (Request Interceptor) 它的任務很簡單:在每個請求發出去之前,都帶上當前的 token

jianer Avatar

@jianer

Nickname 健兒

@jianer

從一個請求封裝的“死循環”Bug,我學到了什麼?—— 深入剖析 async/await 與錯誤處理 前言:那個讓我頭疼的下午

我們都曾經歷過這樣的下午:一個看似邏輯嚴密的模塊,在實際運行時卻表現得像個失控的野獸。我的故事,就從一個本應“智能”處理登錄和 Token 刷新的 ajax 請求封裝函數開始。 我希望它能在接口返回 400(需要登錄)或 4_01(Token 失效)時,自動完成登錄或刷新 Token,然後再重新發起剛才失敗的請求。然而,它卻在某些情況下陷入了可怕的無限循環,瘋狂轟炸着我的服務器。 起初

jianer Avatar

@jianer

Nickname 健兒

@silkide

前端數據拷貝簡史

本來是自己想了解下js中關於零拷貝的內容,順藤摸瓜瞭解了下相關歷史演進,便有了這篇文章。雖説是數據拷貝歷,但其中也夾雜了大量關於Ajax和SPA的歷史,也算是順着拷貝這條藤摸到的瓜,所以有點跑題。希望大家能開心吃瓜,如果有任何紕漏和補充,請在評論區暢所欲言,我們一起完善這段有趣的歷史。 一、為什麼我們需要拷貝? 小明已經有了一個羅技G102鼠標,但是他又買了一個,請問為什麼?答:因為怕第一個壞掉了

silkide Avatar

@silkide

Nickname Silkide