涂鸦Iot 云开发平台提供了 前后端demo,
前端demo地址:
git clone https://github.com/tuya/iot-portal.git
后端demo地址:
https://github.com/tuya/iot-server.git
此demo采用微前端框架qiankun,react框架来开发的。前端要配置代理访问后端接口,前端demo中配置代理如下:
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app, opts = {}) {
const apiPath = opts.apiPath || '/api';
const target = 'http://localhost:8080/';
app.use(
apiPath,
createProxyMiddleware(Object.assign({
// see more: https://github.com/chimurai/http-proxy-middleware#options
target,
changeOrigin: true,
headers: {},
}, opts)),
);
}
后端demo跑到本地8080端口上(http://localhost:8080/),如果请求路径带有/api 则代理到后端demo服务上。这个前端demo 直接用express起的服务。如果我们采用vue框架怎么配置此代理呢?
用vue-cli创建的项目,直接在根目录创建vue.config.js即可,并配置devServer,如下所示:
module.exports = {
chainWebpack: (config) => {
config.plugin("html").tap((args) => {
args[0].title = "管理平台";
return args;
});
},
devServer: {
port: '8085',
proxy: {
"/api": {
target: "http://localhost:8080/",
changOrigin: true,
},
},
},
};
配置后,启动项目请求接口:
import { apiService } from "@tuya/connector";
apiService
.multiLogin({
userName: _mailForm.address,
pwd: _mailForm.mailSecret,
})
.then((userToken) => {
this.afterLogin(userToken, _mailForm.address)
})
报了404错误,看着请求接口路径并没有/api 而是http://localhost:8085/login
应该为http://localhost:8085/api/login
原来没有配置baseUrl导致的,加上此配置接口请求成功:
import { configMethod } from '@tuya/connector';
const init = () => {
const msgWhiteList = [];
configMethod.initGlobalConfig({
headers: {
'Accept-Language': 'zh-CN'
},
baseURL: '/api',
onError: (errorObj) => {
const { code, apiMethodName } = errorObj;
if (code === '1010' || code === '111') {
localStorage.removeItem('_USERNAME');
localStorage.removeItem('_UID');
localStorage.removeItem('_ROLE_TYPE');
if (window.location.pathname !== '/login') {
window.location.replace('/login');
}
return;
}
// 需屏蔽的方法
if (msgWhiteList.includes(apiMethodName)) {
return;
}
},
});
};
export default init;