【uniapp】uniapp 跨域解决

1.服务端设置CORS

在后端的响应头设置Access-Control-Allow-Origin属性，允许前端的访问：

Access-Control-Allow-Origin: *
1

2.在HBuilder编辑器中使用内置浏览器运行

使用hbuildex X 编辑器运行到内置浏览器无需考虑跨域问题。

3. （打包上线需配置nginx）配置代理服务器，在根目录下创建vue.config.js并在里面配置代理（vue2版本）

module.exports = {
	devServer: {
		disableHostCheck: true,
		proxy: {
			"/h5api": {
				target: "https://tiyu.baidu.com",
				changeOrigin: true,
				secure: false,
				pathRewrite: {
					"^/h5api": "/"
				}
			}
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

配置完后，使用uni.request发起网络请求无需https://tiyu.baidu.com
假设完整请求路径如下： https://tiyu.baidu.com/posts
此时发请求如下即可：

uni.request({
	url:"/h5api/posts"  //这里的/h5api相当于设置的target目标地址
}).then(res=>{
	console.log(res);
})
1
2
3
4
5

由于配置了vue.config.js,在微信小程序运行并不适用（微信小程序不存在跨域）。所以需要根据平台判断所属环境，来改变url的路径即可

0.适配小程序端的配置代码如下：

1.封装request.js

import {
	packApiUrl
} from "./common.js"
export function request(config = {}) {
	let {
		url,
		data = {},
		method = "GET",
		header = {}
	} = config

	url = packApiUrl(url); // url 根据环境进行改变

	return new Promise((resolve, reject) => {
		uni.request({
			url,
			data,
			method,
			header,
			success: res => {
				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)
			}
		})
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

2.common.js

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

/**
 * 组装接口url，如果是http 直接返回，否则，需要重新拼接url
 */
export const packApiUrl = (url = '') => {
	if (url.slice(0, 4) === 'http') return url
	else return `${API_HOST}${API_PROXY}${url}`
}
1
2
3
4
5
6
7
8
9
10
11
12

3.config.js

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


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


// api服务器（uni-app 运行平台。如：app、mp-weixin、web ）
export const API_HOST = SYSTEM_INFO.uniPlatform === 'web' ? '' : HOST;


// api服务代理路径
export const API_PROXY = SYSTEM_INFO.uniPlatform === 'web' ? '/h5api' : ''
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4.使用封装好的request.js 发请求

api/apis.js

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

export function apiNbaData() {
	return request({
		url: "/api/match/playerranking/match/NBA/tabId/60"
	})
}
1
2
3
4
5
6
7
8
9

4. （打包上线需配置nginx）配置代理服务器，在根目录下创建vite.config.js并在里面配置代理（vue3版本）

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

export default defineConfig({
  plugins: [uni()],
  server: {
    host: "localhost", // 指定服务器应该监听哪个IP地址,默认：localhost
    port: 8899,        // 指定开发服务器端口,默认：5173
    proxy: {           // 为开发服务器配置自定义代理规则
       // 带选项写法：http://localhost:5173/api/posts -> http://jsonplaceholder.typicode.com/posts
      "/h5api": {
        target: "https://tiyu.baidu.com", // 目标接口
        changeOrigin: true,            // 是否换源
        rewrite: (path) => path.replace(/^\/h5api/, ""),
      }
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

如果要适配小程序端，和上面的vue2的配置一样

5.参考代码 和 参考视频

gitee：参考代码：https://gitee.com/RanGuMo/uniapp.git
B站up咸虾米：参考视频：https://www.bilibili.com/video/BV1rt421V7Kc/?spm_id_from=333.999.0.0