思路:

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

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

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

各端如何配置代理:

1.H5

// 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端

// 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

// httpRequest.js

const BASE_URL = "http://192.168.1.193:8999"

axios.post({

url: BASE_URL + '/system/login',

method: "post",

data: {入参}

})