問題復(fù)現(xiàn)

uniapp項(xiàng)目在瀏覽器運(yùn)行，有可能調(diào)用某些接口會出現(xiàn)跨域問題，報錯如下圖所示：

什么是跨域？

存在跨域問題的原因是因?yàn)闉g覽器的同源策略，也就是說前端無法直接發(fā)起跨域請求。同源策略是一個基礎(chǔ)的安全策略，但是這也會給uniapp/Vue開發(fā)者在部署時帶來一定的麻煩。一般來說，瀏覽器會根據(jù)請求來判斷是否同源，判斷的方式是通過判斷兩個URL的協(xié)議（http or https）、域名和端口是否相同來進(jìn)行的。

在uniapp中出現(xiàn)跨域問題如何解決？

1.服務(wù)端設(shè)置CORS

在后端的響應(yīng)頭設(shè)置Access-Control-Allow-Origin屬性，允許前端的訪問：

Access-Control-Allow-Origin: *

如果條件允許，能給找到接口后端開發(fā)者，只需要響應(yīng)頭添加如此設(shè)置，前端即可正常訪問；

但是后端往往考慮安全問題，API接口只允許自己公司項(xiàng)目使用，如果開啟了運(yùn)行跨域那么所有人都可以來蹭你的接口，導(dǎo)致沒必要的消耗或暴露存在的安全漏洞。

或者用了別人的開源接口根本找不到開發(fā)者，所以這個方案依賴于別人，能不能解決跨域，那就隨緣了。

2.在HBuilder編輯器中使用內(nèi)置瀏覽器運(yùn)行

如上圖所示，uniapp項(xiàng)目使用內(nèi)置瀏覽器預(yù)覽調(diào)試，可以輕松解決接口在外部瀏覽器出現(xiàn)的跨域問題。

這種方案也是最簡單方便的解決辦法。

3.在vite.config.js中配置代理（vue3版本）

這種方案是開發(fā)vue項(xiàng)目最普遍的用法，在uniapp項(xiàng)目中依然適用，也是我重點(diǎn)給推薦的方式。

vue3是適用vite構(gòu)建及打包的，所以在uniapp項(xiàng)目根目錄下創(chuàng)建vite.config.js，拷貝如下代碼：

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
export default defineConfig({
  plugins: [uni()],
  server: {
    host: "localhost", // 指定服務(wù)器應(yīng)該監(jiān)聽哪個IP地址,默認(rèn)：localhost
    port: 5173,        // 指定開發(fā)服務(wù)器端口,默認(rèn)：5173
    proxy: {           // 為開發(fā)服務(wù)器配置自定義代理規(guī)則
       // 帶選項(xiàng)寫法：http://localhost:5173/api/posts -> http://jsonplaceholder.typicode.com/posts
      "/api": {
        target: "http://jsonplaceholder.typicode.com", // 目標(biāo)接口
        changeOrigin: true,            // 是否換源
        rewrite: (path) => path.replace(/^\/api/, ""),
      }
    }
  }
});

假設(shè)接口為http://jsonplaceholder.typicode.com/posts ，那么發(fā)送網(wǎng)絡(luò)請求的時候就可以使用如下方式了：

uni.request({
	url:"/api/posts"  //這里的/api相當(dāng)于設(shè)置的target目標(biāo)地址
}).then(res=>{
	console.log(res);
})

例：
接口地址：https://tiyu.baidu.com/api/match/playerranking/match/NBA/tabId/60

補(bǔ)充 vue.config.js中配置代理（vue2版本）

有些同學(xué)使用的是vue2版本開發(fā)項(xiàng)目，vue2和vue3的構(gòu)建工具不同，下面介紹一下vue2版本如何配置代理。
1）在根目錄下創(chuàng)建vue.config.js
2) 拷貝下面的代碼

module.exports = {
  devServer: {
    disableHostCheck: true,
    proxy: {
      "/devapi": {
        target: "http://jsonplaceholder.typicode.com",        
        changeOrigin: true,
        secure: false,        
        pathRewrite: {
          "^/devapi": "/"
        }
      }
    }
  }
}

3）網(wǎng)絡(luò)請求應(yīng)用

uni.request({
	url:"/devapi/posts"  //這里的/devapi相當(dāng)于設(shè)置的target目標(biāo)地址
}).then(res=>{
	console.log(res);
})

詳細(xì)視頻教程

到此這篇關(guān)于在uniapp Vue3版本中如何解決web/H5網(wǎng)頁瀏覽器跨域的問題的文章就介紹到這了,更多相關(guān)uniapp Vue3跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論