跨域是指訪問(wèn)另外一個(gè)域的資源，由于瀏覽器的同源策略，默認(rèn)情況下使用 XMLHttpRequest 和 Fetch 請(qǐng)求時(shí)是不允許跨域的。跨域的根本原因是瀏覽器的同源策略，這是由瀏覽器對(duì) JavaScript 施加的安全限制。
Axios 跨域常見(jiàn)報(bào)錯(cuò)
跨域請(qǐng)求被阻止 (Cross-Origin Request Blocked) ：
這是由瀏覽器實(shí)施的同源策略導(dǎo)致的錯(cuò)誤。瀏覽器在默認(rèn)情況下不允許從一個(gè)源發(fā)送請(qǐng)求到另一個(gè)源，除非目標(biāo)服務(wù)器明確授權(quán)。如果沒(méi)有采取任何跨域解決方案，瀏覽器會(huì)攔截該請(qǐng)求，并報(bào)告此錯(cuò)誤。
無(wú)法獲取響應(yīng)內(nèi)容 (No 'Access-Control-Allow-Origin' header is present on the requested resource) ：
當(dāng)使用 CORS (跨域資源共享) 解決方案時(shí)，服務(wù)器需要在響應(yīng)頭中添加 Access-Control-Allow-Origin 頭信息來(lái)指示允許訪問(wèn)資源的來(lái)源。如果服務(wù)器沒(méi)有正確配置這個(gè)頭信息或配置不正確，瀏覽器會(huì)報(bào)告此錯(cuò)誤，表示未經(jīng)授權(quán)無(wú)法獲取響應(yīng)內(nèi)容。
請(qǐng)求出現(xiàn)網(wǎng)絡(luò)錯(cuò)誤 (Network Error) ：
當(dāng)跨域請(qǐng)求在發(fā)送時(shí)出現(xiàn)網(wǎng)絡(luò)錯(cuò)誤（例如目標(biāo)服務(wù)器不可訪問(wèn)、請(qǐng)求超時(shí)等），Axios 會(huì)捕獲這個(gè)錯(cuò)誤，并將其報(bào)告為 "Network Error"。
預(yù)檢請(qǐng)求失敗 (Preflight request failed) ：
當(dāng)使用 CORS 發(fā)起一些復(fù)雜的請(qǐng)求（例如帶有自定義頭信息或使用 PUT、DELETE 等非簡(jiǎn)單請(qǐng)求類型），瀏覽器會(huì)在發(fā)送真實(shí)請(qǐng)求之前發(fā)送一個(gè) OPTIONS 預(yù)檢請(qǐng)求。如果服務(wù)器沒(méi)有正確處理 OPTIONS 請(qǐng)求或未返回正確的預(yù)檢響應(yīng)頭，瀏覽器會(huì)報(bào)告 "Preflight request failed" 錯(cuò)誤。
代理服務(wù)器錯(cuò)誤：
如果使用代理服務(wù)器作為解決方案，但代理服務(wù)器配置有誤或不可用，Axios 可能會(huì)報(bào)告與代理服務(wù)器連接相關(guān)的錯(cuò)誤。
Axios 跨域的解決方法
1. CORS
CORS 需要服務(wù)器設(shè)置 Access-Control-Allow-Origin 響應(yīng)頭，表示該資源可以被指定的域進(jìn)行跨域訪問(wèn)。
// 服務(wù)端代碼
res.setHeader('Access-Control-Allow-Origin', '*');
2. 服務(wù)端啟用 CORS
比如 Node.js ?Express 啟用 CORS:
const express = require('express')
const app = express()
app.use(function (req, res, next) {
// 啟用 CORS
res.header('Access-Control-Allow-Origin', '*');
next();
})
3. JSONP
JSONP 的原理是動(dòng)態(tài)插入
import axios from 'axios';
axios.get('/api/user?callback=fetchUser');
function fetchUser(user) {
console.log(user);
}
服務(wù)端返回 JSON 數(shù)據(jù)并帶上函數(shù)調(diào)用:
fetchUser({
name: 'jack'
})
4. 代理服務(wù)器
在開(kāi)發(fā)環(huán)境下，可以在本地啟動(dòng)一個(gè)代理服務(wù)器，實(shí)現(xiàn)跨域訪問(wèn)。在下面的例子中，客戶端可以通過(guò)訪問(wèn)代理服務(wù)器的 /api/data 路由來(lái)獲取目標(biāo)服務(wù)器上的數(shù)據(jù)。
// Node.js 代理服務(wù)器
const express = require('express');
const axios = require('axios');
const app = express();
const port = 3000;
app.use(express.json());
app.get('/api/data', async (req, res) => {
try {
const response = await axios.get('https://目標(biāo)服務(wù)器的URL/data');
res.json(response.data);
} catch (error) {
res.status(500).json({ error: 'Failed to fetch data from the target server' });
}
});
app.listen(port, () => {
console.log(`Proxy server is running on http://localhost:${port}`);
});
Axios 跨域代碼實(shí)例
假設(shè)存在一個(gè)需要跨域訪問(wèn)的 API:
axios.get('http://cross-domain-api.com/users')
可以在本地 3000 端口啟動(dòng)一個(gè) Express 代理服務(wù)器:
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
app.use('/api', createProxyMiddleware({
target: 'http://cross-domain-api.com', // 跨域目標(biāo)接口
changeOrigin: true
}))
app.listen(3000);
然后修改 axios 請(qǐng)求地址,指向代理服務(wù)器即可:
axios.get('http://localhost:3000/api/users')
## 提示與注意事項(xiàng)
- 選擇跨域解決方案時(shí)，考慮到項(xiàng)目的復(fù)雜性和需求，選擇最合適的方法。
- JSONP 只支持 GET 請(qǐng)求，不適用于所有場(chǎng)景。
- CORS 需要服務(wù)器端的支持，在一些舊版本的瀏覽器中可能不完全支持。
使用 Apifox 調(diào)試后端接口
Apifox = Postman + Swagger + Mock + JMeter，Apifox 支持調(diào)試 http(s)、WebSocket、Socket、gRPC、Dubbo 等協(xié)議的接口，并且集成了 IDEA 插件。在后端人員寫完服務(wù)接口時(shí)，測(cè)試階段可以通過(guò) Apifox 來(lái)校驗(yàn)接口的正確性，圖形化界面極大的方便了項(xiàng)目的上線效率。
總結(jié)
Axios 跨域常用的解決方法有 CORS、JSONP、代理等，開(kāi)發(fā)環(huán)境可通過(guò)代理服務(wù)器實(shí)現(xiàn)跨域，CORS 需要服務(wù)端設(shè)置 Access-Control-Allow-Origin 響應(yīng)頭，JSONP 只支持 GET 請(qǐng)求。選擇適合項(xiàng)目需求的解決方案能夠很好地解決跨域問(wèn)題，保障應(yīng)用的正常運(yùn)行。
最后感謝每一個(gè)認(rèn)真閱讀我文章的人，禮尚往來(lái)總是要有的，這些資料，對(duì)于【軟件測(cè)試】的朋友來(lái)說(shuō)應(yīng)該是最全面最完整的備戰(zhàn)倉(cāng)庫(kù)，雖然不是什么很值錢的東西，如果你用得到的話可以直接拿走：
這些資料，對(duì)于【軟件測(cè)試】的朋友來(lái)說(shuō)應(yīng)該是最全面最完整的備戰(zhàn)倉(cāng)庫(kù)，這個(gè)倉(cāng)庫(kù)也陪伴上萬(wàn)個(gè)測(cè)試工程師們走過(guò)最艱難的路程，希望也能幫助到你！?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-860153.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-860153.html
到了這里，關(guān)于跨域問(wèn)題？無(wú)需擔(dān)心！學(xué)習(xí)如何解決 Axios 的跨域限制的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
