uniapp结局H5跨域问题，连小程序一起解决！！！

遇到的问题：

1.创建vite.config.js文件

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
  plugins: [uni()],
  server: {
    host: "localhost", // 指定服务器应该监听哪个IP地址,默认：localhost
    port: 8899,        // 指定开发服务器端口,默认：5173,换成8899因为NBA那个是8899
    proxy: {           // 为开发服务器配置自定义代理规则
      "/h5api": {
        target: "https://tiyu.baidu.com", // 目标接口
        changeOrigin: true,            // 是否换源
        rewrite: (path) => path.replace(/^\/h5api/, ""),
      }
    }
  }
});

说明：启动换源

2.创建cofig.js

// 系统信息
export const SYSTEM_INFO = uni.getSystemInfoSync()


// 主机地址
export const HOST = 'https://tiyu.baidu.com';


// api服务器
export const API_HOST = SYSTEM_INFO.uniPlatform === 'web' ? '' : HOST;


// api服务代理路径
export const API_PROXY = SYSTEM_INFO.uniPlatform === 'web' ? '/h5api' : ''

说明：host配置自己的主机地址，自己的项目这里需要更改

3.创建utils文件，里面创建common.js和request.js文件

1.common.js

import {API_HOST,API_PROXY} from "../config.js"

/**
 * 组装接口url
 */
export const packApiUrl = (url = '') => {
  if (url.slice(0, 4) === 'http') return url
  else return `${API_HOST}${API_PROXY}${url}`
}

2.request.js

import { packApiUrl } from "./common.js"

export function request(config={}){	
	let {
		url,
		data={},
		method="GET",
		header={}
	} = config
	
	url =packApiUrl(url) 
	
	
	return new Promise((resolve,reject)=>{		
		uni.request({
			url,
			data,
			method,
			header,
			success:res=>{
				console.log(res);
				//原因，类型不一样，是字符型0，不是int型0，视频中使用的两个等号。
				if(res.data.status === '0'){
					resolve(res.data.data)
				}else{
					uni.showToast({
						title:res.data.message,
						icon:"none"
					})
					reject(res.data.data)
				}				
			},
			fail:err=>{
				reject(err)
			}
		})
	})
}

说明：调用packApiUrl()方法对url进行处理。

4创建api文件夹，里面创建apis.js文件

import {request} from "@/utils/request.js"

export function apiNbaData(){
	return request({
		url:"/api/match/playerranking/match/NBA/tabId/60"		
	})	
}

说明：调用自己接口进行调整。这里是咸虾米课程的接口可以直接调用，如若不能实现请看对应具体课程。我表示衷心的感谢。

咸虾米B站教程https://www.bilibili.com/video/BV1rt421V7Kc/?spm_id_from=333.337.search-card.all.click&vd_source=b00a236e112aa6951d3ff01314c34fa7

5.编写index.vue

<template>
<!-- 小程序没有跨域这个说法，我们需要解决 -->
<view class="content">
	<scroll-view scroll-y v-for="item in nbaData" :key="playerId">
		<text>{{item.playerName}}</text>
		<image :src="item.logo" mode="aspectFill"></image>
		
	</scroll-view>
</view>
</template>

<script setup>
import { ref } from 'vue';
//注意导入的方式
import {apiNbaData} from '@/api/apis.js'
	const nbaData = ref([]);
	const getData = ()=>{
		apiNbaData().then(res=>{
			//console.log(res);
			nbaData.value = res.data;
		})
		
	}
/* 	const getData =()=>{
		uni.request({
			url:""
		}).then(res=>{
			console.log(res.data.data.data);
			nbaData.value = res.data.data.data;
		})
	} */
getData();
</script>

<style lang="scss" scoped>

</style>

22