小程序/App和H5/Web端代理问题梳理

思路:

web端和h5是需要在浏览器访问的,由于浏览器的同源(同域)策略,会出现跨域的情况,所以需要在配置文件中添加反向代理。

小程序和app由于不受同源策略的影响,所以不需要进行反向代理,同时小程序必须得用https协议域名。

在开发的时候如果没有https域名,可以先在本地开启'不校验合法域名'。

各端如何配置代理:
1.H5

javascript 复制代码
// config.js
h5:{
	devServer:{
		host:127.0.0.1,
		port:8088,
		proxy:{
			"/api": {
				target: "http://www.baidu.com", // 代理到的目标域名
				changeOrigin: true, // 是否支持跨域
				pathRewrite: {  // 接口地址中又api则不需要配置,没有则需要配置,替换成正确的请求接口地址
					"^/api": ""
				}
			}
		}
	}
}

2.Web端

javascript 复制代码
// vue.config.js
const config = {
	devServer:{
		host:127.0.0.1,
		port:8088,
		proxy:{
			"/api": {
				target: "http://www.baidu.com", // 代理到的目标域名
				changeOrigin: true, // 是否支持跨域
				pathRewrite: {  // 接口地址中又api则不需要配置,没有则需要配置,替换成正确的请求接口地址
					"^/api": ""
				}
			}
		}
	}
}
module.exports = config

3.小程序/App

javascript 复制代码
// httpRequest.js
const BASE_URL = "http://192.168.1.193:8999"
axios.post({
	url: BASE_URL + '/system/login',
	method: "post",
	data: {入参}
})
相关推荐
山河木马2 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户9272472502192 分钟前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端
努力只为躺平7 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
李大玄9 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵9 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
蓝倾15 分钟前
京东批量获取商品SKU操作指南
前端·后端·api
JSLove21 分钟前
常见 npm 报错问题
前端·npm
sunbyte22 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子23 分钟前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
澄江静如练_24 分钟前
微信小程序发体验版
微信小程序·小程序