小程序/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: {入参}
})
相关推荐
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水7 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐7 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121387 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴7 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript