關(guān)于uni-app訪問接口跨域的常見問題及解決方案

一、uni-app跨域訪問的常見問題

在uni-app的前后臺(tái)分離開發(fā)中，當(dāng)我們嘗試調(diào)試請(qǐng)求接口時(shí)，可能會(huì)遇到跨域問題。具體來說，有以下幾種常見情況：

1. 在本地服務(wù)器預(yù)覽頁面時(shí)，使用ajax訪問遠(yuǎn)程服務(wù)器的內(nèi)容時(shí)請(qǐng)求失敗。

2. 由于瀏覽器的同源策略，導(dǎo)致的跨域訪問問題。

二、解決方案

針對(duì)上述問題，我們可以通過以下方式來解決uni-app的跨域訪問問題：

1. 調(diào)整項(xiàng)目中的manifest.json文件配置。找到h5配置中的devServer部分，設(shè)置如下：

"port": 8080，設(shè)置瀏覽器運(yùn)行端口。

"disableHostCheck": true，跳過host檢查。

在proxy部分，設(shè)置"/api"的target為本地服務(wù)器地址，并開啟changeOrigin以及根據(jù)具體情況調(diào)整pathRewrite。這樣可以將api路徑重定向。

2. 在請(qǐng)求代碼中，確保請(qǐng)求的URL以"/api/"開頭。

三、跨域問題的原理及概述

跨域問題主要是由瀏覽器的同源策略造成的，這是一種增加網(wǎng)絡(luò)安全性的策略。同源策略是由Netscape提出的安全策略，要求瀏覽器在解析Ajax請(qǐng)求時(shí)，請(qǐng)求的路徑與瀏覽器路徑必須滿足協(xié)議、域名、端口號(hào)都相同。不滿足此規(guī)則即為非同源，瀏覽器會(huì)阻止請(qǐng)求。

四、什么是跨域問題及uniapp跨域問題的解決方法

跨域問題是指一個(gè)網(wǎng)站的腳本嘗試訪問另一個(gè)不同域名或端口的資源時(shí)遇到的限制。對(duì)于uniapp跨域問題，我們可以通過調(diào)整manifest.json文件中的配置來解決。在源碼視圖中進(jìn)行如下調(diào)整：修改devServer配置項(xiàng)以確保開啟代理服務(wù)，并配置代理規(guī)則將外部資源請(qǐng)求的域名映射到本地服務(wù)器。這樣，uniapp項(xiàng)目在運(yùn)行時(shí)就可以成功繞過跨域限制，實(shí)現(xiàn)跨域請(qǐng)求。

五、Vue本地開發(fā)跨域問題的解決方式

在將原生app改版為Vue應(yīng)用時(shí)，若在本地開發(fā)調(diào)用已上線的API遇到跨域問題，可以通過以下幾種方式解決：

1. 代理服務(wù)器：配置代理服務(wù)器，如使用http-proxy-middleware，在vue.config.js中設(shè)置代理規(guī)則，將所有API請(qǐng)求轉(zhuǎn)發(fā)到實(shí)際服務(wù)器。

2. CORS：如果后端支持，可以在服務(wù)器端設(shè)置CORS響應(yīng)頭，允許來自Vue應(yīng)用的跨域請(qǐng)求。

3. JSONP：如果后端支持JSONP跨域請(qǐng)求，可以使用Vue中的JSONP庫(kù)發(fā)送請(qǐng)求。

4. WebSocket：考慮使用WebSocket進(jìn)行雙向通信，作為一種不受同源策略限制的跨域通信方式。

結(jié)合實(shí)際情況選擇最適合的解決方案。在開發(fā)環(huán)境中，使用代理服務(wù)器通常是解決跨域問題的常見方法。