問題復現(xiàn)

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

什么是跨域？

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

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

1.服務端設置CORS

在后端的響應頭設置Access-Control-Allow-Origin屬性，允許前端的訪問：

Access-Control-Allow-Origin: *

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

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

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

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

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

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

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

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

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

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

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

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

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

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

有些同學使用的是vue2版本開發(fā)項目，vue2和vue3的構建工具不同，下面介紹一下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)絡請求應用

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

詳細視頻教程

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

最新評論