ToB企服应用市场:ToB评测及商务社交产业平台

标题: 小白总结uniapp微信小程序跨域问题的解决（前端） [打印本页]
作者: 缠丝猫    时间: 2024-6-29 22:40
标题: 小白总结uniapp微信小程序跨域问题的解决（前端）
前言：本人前端小白一枚，在B站听了一个很不错的视频，关于uniapp Vue3超详细教程，有需要的小伙伴可以去听，受益匪浅，下面是该博主的链接：
   gitee源码地址：https://gitee.com/qingnian8/uniapp-ling_project.git
  官方保举链接：动态-哔哩哔哩
  本文参考链接：在uniapp Vue3版本中怎样解决web/H5网页欣赏器跨域的问题_uniapp webview跨域-CSDN博客
  第一次写博客，重要是想分享与本身总结~（有问题还盼望看到的小伙伴多多指教~）
下面直接进入正题，关于uniapp微信小程序的跨域解决：
什么是跨域

跨域指的是在欣赏器中，当一个网页尝试加载另一个差别域名（或协议、端口号）下的资源时所面对的限定。
en，简单说，之所以存在跨域是因为差别源，什么是差别源呢，要知道同源策略
   同源策略是一种安全机制，它限定了一个网页中加载的资源与当前页面本身来自同一泉源的资源进行交互。这种策略保护了用户的信息安全，防止恶意网站通过 JavaScript 等方式获取到用户的敏感信息。
  例如，如果一个网页（http://example.com）试图通过 JavaScript 代码加载另一个网页（http://anotherdomain.com）中的数据，这就属于跨域哀求，欣赏器会阻止这种操作。
错误提示像这种，就是跨域了


解决跨域

条件：你已经创建好了项目哦（HBuilder Vue3项目）
设置vite.config.js

打开HBuilder项目，创建一个新的名为“vite.config.js”的js文件，参考目次布局：

vite.config.js参考代码如下：
  1. import { defineConfig } from 'vite';
  2. import uni from '@dcloudio/vite-plugin-uni';
  4. export default defineConfig({
  5.   plugins: [uni()],
  6.   server: {
  7.     host: "localhost", // 指定服务器应该监听哪个IP地址,默认：localhost
  8.     port: 7788,        // 指定开发服务器端口,默认：5173,端口号自己改
  9.     proxy: {           // 为开发服务器配置自定义代理规则
  10.        // 这个代理路径名称/wxapi自行修改，如/proapi
  11.       "/wxapi": {
  12.         target: "https://tiyu.baidu.com", // 目标接口，请求的根地址拿过来
  13.         changeOrigin: true,            // 是否换源
  14.         rewrite: (path) => path.replace(/^\/wxapi/, ""),
  15.       }
  16.     }
  17.   }
  18. });
复制代码
因为小程序里没有署理，H5可以实现，但小程序我们还需以下设置
创建目次及文件

需要创建以下目次,以及相对应的js文件，目次布局如下：

设置各文件

//config.js

根据差别的平台设置API哀求的URL和署理路径，common.js会用到
  1. // 系统信息
  2. export const SYSTEM_INFO = uni.getSystemInfoSync()
  5. // 主机地址
  6. export const HOST = 'https://tiyu.baidu.com';
  9. // api服务器
  10. export const API_HOST = SYSTEM_INFO.uniPlatform === 'web' ? '' : HOST;
  13. // api服务代理路径
  14. export const API_PROXY = SYSTEM_INFO.uniPlatform === 'web' ? '/wxapi' : ''
复制代码
//common.js

因为小程序无署理，我们写一个packApiUrl()方法对传过来的url进行一个判断，如果是web,字符串拼接url，不是则不拼接还是原来的url，封装哀求会用到此方法。
  1. import {API_HOST,API_PROXY} from "../config.js"
  3. /**
  4. * 组装接口url
  5. */
  6. export const packApiUrl = (url = '') => {
  7.   if (url.slice(0, 4) === 'http') return url
  8.   else return `${API_HOST}${API_PROXY}${url}`
  9. }
复制代码
//request.js

导入上面的方法，封装网络哀求
  1. import {packApiUrl} from "./common.js"
  2. export function request(config={}){       
  3.         let {
  4.                 url,
  5.                 data={},
  6.                 method="GET",
  7.                 header={}
  8.         } = config
  9.        
  10.         url =packApiUrl(url);               
  11.        
  12.         return new Promise((resolve,reject)=>{               
  13.                 uni.request({
  14.                         url,
  15.                         data,
  16.                         method,
  17.                         header,
  18.                         success:res=>{                               
  19.                                 if(res.data.status==0){
  20.                                         resolve(res.data.data)
  21.                                 }else{
  22.                                         uni.showToast({
  23.                                                 title:res.data.message,
  24.                                                 icon:"none"
  25.                                         })
  26.                                         reject(res.data.data)
  27.                                 }                                                       
  28.                                
  29.                         },
  30.                         fail:err=>{
  31.                                 reject(err)
  32.                         }
  33.                 })
  34.         })
  35. }
复制代码
//api.js

  1. //引入request请求
  2. import {request} from "../utils/request.js"
  3. //请求数据接口
  4. export function apiNbaData(){
  5.         return request({
  6.                 url:"/api/match/playerranking/match/NBA/tabId/60" //访问的接口       
  7.         })       
  8. }
复制代码
示例

//index.vue
  1. <template>
  2.         <view class="container">       
  3.                 <view class="row" v-for="(item,index) in listData" :key="index">
  4.                         <image :src="item.logo" mode=""></image>
  5.                         <view>{{item.playerName}}</view>
  6.                 </view>
  7.         </view>
  8. </template>
  10. <script setup>
  11.         import {
  12.                 ref
  13.         } from 'vue';
  14.         import {
  15.                 apiNbaData
  16.         } from "../../api/api.js"
  18.         const listData = ref([])
  20.         const getData = () => {
  21.                 apiNbaData().then(res => {
  22.                         console.log(res);
  23.                         listData.value = res.data
  24.                 })
  25.         }
  26.         getData();
  27. </script>
  29. <style scoped lang="scss">
  31. </style>
复制代码
结果图：

结语

所有代码可直接复制粘贴，接口是咸虾米_博主开源的，可以直接用，需要的最上边链接。
最后，打包上线还需nginx反向署理实现（我不会，还需继续学习）

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4