【uniapp】跨域代理及一些常见问题：_uniapp pathrewrite

1、法一：

manifest.json文件

"h5": {
	"devServer": {
		"port": 8000,
		"disableHostCheck": true,
		"proxy": {
			"/api": {
				"target": "http://121.204.170.197:8000/i8",//代理的接口
				 "changeOrigin": true,//是否跨域
		         "secure": false,   // 设置支持https协议的代理
			     //"pathRewrite": {	"^/api": "" }  //如需去掉前缀则加上此配置 
			},
			//"/web": {
			//	"target": "http://121.204.170.197:8000/i8",
			//	"changeOrigin": true,//是否跨域
		    //   "secure": false   // 设置支持https协议的代理
			//	//"pathRewrite": {	"^/web": "" }  //如需去掉前缀则加上此配置 
			//}
		}
	},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2、法二：

vue.config.js文件=>vue中跨域是一样的

// 跨域配置
module.exports = {
	devServer: { //记住，别写错了devServer//设置本地默认端口  选填
		port: 8000,
		proxy: { //设置代理，必须填
			'/api': { //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
				target: 'http://121.204.170.197:8000/i8', //代理的目标地址
				changeOrigin: true, //是否设置同源，输入是的
				pathRewrite: { //路径重写
					'/api': '' //选择忽略拦截器里面的单词
				}
			},
			//'/web': { //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
			//	target: 'http://121.204.170.197:8000/i8', //代理的目标地址
			//	changeOrigin: true, //是否设置同源，输入是的
			//	pathRewrite: { //路径重写
			//		'/web': '' //选择忽略拦截器里面的单词
			//	}
			//}
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3、使用：

manifest.json优先级高于vue.config.js
1

uni.request({
	url: '/api/PMS/MwApi/GetMwBaseData',//  /api要与上面的/api一致
	//url: '/api'+'/PMS/MwApi/GetMwBaseData',//  /api要与上面的/api一致
	//url: '/web/PMS/MwApi/GetMwBaseData',
	method: 'GET',
	data: {
		pageIndex: '0', //	string	是	页码	0
		pageSize: '20', //	string	是	每页条数	20
		method: 'Enterprise', //	string	是	业务类型	Enterprise
		searchKey: that.consignee, //	string	否	模糊查询（支持名称和编码）	无
		updateTime: '', //	datetime	否	更新时间（查询该时间之后插入和更新的数据）	2021-07-27 17:15:59.210
	},
	success: (res) => {
		if (res.statusCode == 200) {
			console.log(res.data)
		} else {
			uni.showToast({
				title: res.data.ErrorMessage,
				icon: 'none'
			})
		}
	},
	fail: (err) => {
		uni.showToast({
			title: err.ErrorMessage,
			icon: 'none'
		})
	},
});
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

4、跨域代理不成功的原因：

uniapp跨域报错Faild to load response data: No resourse with given identifier found

1、"pathRewrite": {	"^/api": "" } 需要的没加，不需要的加上了

2、项目没有重新启动,刷新是不生效的

3、地址，逗号，源码等有误=》如http://121.204.170.197:8000/i8后面还有/i8,容易被遗忘

4、请求头不正确等
1
2
3
4
5
6
7

5、部署配置:

uniapp跨域官网

（1）安装egg-cors包

npm i egg-cors --save
1

（2）在plugin.js中设置开启cors

'use strict';
/** @type Egg.EggPlugin */

module.exports = {
	cors: {
		enable: true,
		package: 'egg-cors',
	},
}
1
2
3
4
5
6
7
8
9

（3）在config.default.js中配置

config.security = {
	domainWhiteList: ['*'], //允许访问接口的白名单(跨域地址要允许你的服务器地址访问)，例如：http://localhost:8080 *表示均可访问
};
//cors
// config.cors = {
// 	origin: "*",
// 	allowMethods: "GET, HEAD, PUT, POST, DELETE, PATCH",
// 	credentials: true
// }
1
2
3
4
5
6
7
8
9

6.遇到问题：

让后端配置CORS吧
1

7.

import Vue from 'vue'
import axios from 'axios'
 
// 创建axios对象
const service = axios.create({
	baseURL: 'http://192.168.8.237:8002/api/',
	// 跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)，也可以简单的理解为，当前请求为跨域类型时是否在请求中协带cookie。
	// 注意：withCredentials和后端配置的cros跨域不可同时使用
	//withCredentials: true, 
	// 请求超时时间
	timeout: 10000,
	// 是否跨域请求
	crossDomain: true,
	// headers:{
	// 	"Content-Type":"application/json;charset:utf-8",
	// },
	headers:{
		"Content-Type":"multipart/form-data",
	},
	
})
 
// request拦截器,在请求之前做一些处理
service.interceptors.request.use(config => {
	//请求时显示正在加载中
	uni.showLoading({
		title: '加载中~'
	});
	//添加请求头，比如从本地缓存获取token
	if (uni.getStorageSync("Token")) {
		config.headers['token'] = uni.getStorageSync('Token')	
	}
	return config;
	},
	error => {
		return Promise.reject(error);
	}
);
 
// 配置成功后的拦截器
service.interceptors.response.use(res => {
	//请求时成功后关闭正在加载中
	uni.hideLoading();
	// 根据个人后端结构自定义,原文是if (res.data.status == 200)，而我这里需要是res.status
	if(res.data.msg=="过期"){
		uni.showToast({
			title:"登陆有效期已过，请重新登陆~",
			icon:"error"
		})
		setTimeout(function() {
			uni.navigateTo({
				url:"/pages/login/login"
			})
		}, 1000);
	}
	if (res.status == 200) {
		return res.data
	} else {
		// 原文是 Promise.reject(res.data.msg)，但我这里变量名称是message
		return Promise.reject(res.data.message);
	}
}, error => {
	console.log(error)
	if(error.message=="timeout of 10000ms exceeded"){
		uni.showToast({
			title:"请求超时~",
			icon:'error'
		})
	}
	if (error.response.status) {
		switch (error.response.status) {
			case 401:
				break;
			default:
				break;
		}
	}
	return Promise.reject(error)
})
 
 
// 在main.js中放入这段自定义适配器的代码，就可以实现uniapp的app和小程序开发中能使用axios进行跨域网络请求，并支持携带cookie
axios.defaults.adapter = function(config) {
	return new Promise((resolve, reject) => {
		let settle = require('axios/lib/core/settle');
		let buildURL = require('axios/lib/helpers/buildURL');
		uni.request({
			methods: config.methods.toUpperCase(),
			url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
			header: config.headers,
			data: config.data,
			dataType: config.dataType,
			responseType: config.responseType,
			sslVerify: config.sslVerify,
			complete: function complete(response) {
				response = {
					data: response.data,
					status: response.statusCode,
					errMsg: response.errMsg,
					header: response.header,
					config: config
				};
 
				settle(resolve, reject, response);
			}
		})
	})
}
 
export default service
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

main.js里面:

import axios from 'utils/https.js';
Vue.prototype.$axios = axios;
1
2
3
4