解决uni-app跨域

解决uniapp跨域

1.manifest.json

关键:

"h5": {
		"devServer": {
			"port": 7000,
			"https": false,
			"proxy": {
				"/api": {
					"target": "http://localhost:8080",
					"changeOrigin": true,
					"secure": false,
					"ws":false,
					"pathRewrite": {
						"^/api": ""
					}
				}
			}
		}
	},

完整

{
	"name": "test",
	"appid": "__UNI__CC1A208",
	"description": "",
	"versionName": "1.0.0",
	"versionCode": "100",
	"transformPx": false,
	"h5": {
		"devServer": {
			"port": 7000,
			"https": false,
			"proxy": {
				"/api": {
					"target": "http://localhost:8080",
					"changeOrigin": true,
					"secure": false,
					"ws":false,
					"pathRewrite": {
						"^/api": ""
					}
				}
			}
		}
	},
	/* 5 App特有相关 */
	"app-plus": {
		"usingComponents": true,
		"nvueStyleCompiler": "uni-app",
		"compilerVersion": 3,
		"splashscreen": {
			"alwaysShowBeforeRender": true,
			"waiting": true,
			"autoclose": true,
			"delay": 0
		},
		/* 模块配置 */
		"modules": {},
		/* 应用发布信息 */
		"distribute": {
			/* android打包配置 */
			"android": {
				"permissions": [
					"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
					"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
					"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
					"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
					"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
					"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
					"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
					"<uses-permission android:name=\"android.permission.CAMERA\"/>",
					"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
					"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
					"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
					"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
					"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
					"<uses-feature android:name=\"android.hardware.camera\"/>",
					"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
				]
			},
			/* ios打包配置 */
			"ios": {},
			/* SDK配置 */
			"sdkConfigs": {}
		}
	},
	/* 快应用特有相关 */
	"quickapp": {},
	/* 小程序特有相关 */
	"mp-weixin": {
		"appid": "",
		"setting": {
			"urlCheck": false
		},
		"usingComponents": true
	},
	"mp-alipay": {
		"usingComponents": true
	},
	"mp-百度": {
		"usingComponents": true
	},
	"mp-toutiao": {
		"usingComponents": true
	},
	"uniStatistics": {
		"enable": false
	},
	"vueVersion": "2"
}

2. request.js

import {getToken} from "../token.js"
export const request = (params)=>{
	// const baseUrl = "http://localhost:8080"
	return new Promise((resolve, reject) => {
		uni.request({
			...params,
			url:params.url,
			// if (getToken()) {
			// 		params.header = {
			// 			'content-type': 'application/json',
			// 			'toekn': `${getToken()}`	// 这里是token(可自行修改)
			// 		};
			// 	}
			success(res) {
				resolve(res.data) // 将请求成功后得到的数据返回出去 可以用then方法接受到数据
			},
			
			fail(err) {
				reject(err) // 将请求失败后返回的信息 返回出去 可以用catch方法接受到
			},
			
			complete() {//请求成功后执行的某些事件
				
			}
		})
	})
}

访问

<script>
	import {request} from '../../utils/request/index.js'
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			async login(){
							const res = await request({url:'/api/user-tokens',method:'post',data:{username:'111',password:'666'}})
							console.log(res)
						}

		}
	}
</script>

成功

这篇好文章是转载于：学新通技术网