H5：局部滚动 及 跨域请求
2021-06-25 本文已影响0人
春暖花已开
根据环境决定是否开启调试工具
/**
* 根据环境在页面插入eruda调试工具
*/
export function debugInjectOfRunningEnv() {
// 获取 process.env.API_ENV 环境变量
const env = getRunningEnv()
// 判断非 prod|pre 环境
if (env !== 'PROD' && env !== 'PRE') {
const script = document.createElement('script')
script.src = '//cdn.jsdelivr.net/npm/eruda'
document.body.appendChild(script)
script.onload = function () {
// 执行
if (window.eruda) {
window.eruda.init()
}
}
}
}
局部滚动：
<html lang="en">
<head>
<style>
.out {
width: 375px;
height: 400px;
background: red;
font-size: 14px;
}
.inner {
background: gray;
/* 默认: visible; auto: 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 */
overflow-x: auto;
}
.inner span {
/* 不折行 */
white-space: nowrap;
}
</style>
</head>
<body>
<div class="out">
<div class="inner">
<h2>钱江晚报小时新闻评论员</h2>
<span>新冠病毒确诊病例及密接人员身份等相关隐私信息的泄露问题，如今成了社会关注的焦点。</span>
<span>近日，莆田市两名泄露初筛阳性人员和密接者个人信息的医疗业相关工作人员，被处以500元的行政处罚。</span>
</div>
<button class="click" onclick="clickButton()">点击</button>
</div>
</body>
</html>
跨域请求：
在 vue.config.js 里增加如下配置：
module.exports = {
devServer: {
port: 9000,
proxy: {
'^/mzcors': {
target: 'https://www.baidu.com/',
pathRewrite: {
'^/mzcors': ''
},
changeOrigin: true
}
}
}
}
使用：
axios.post('/mzcors/getUserInfo.do', {
userInfo: { phoneNumber: '18812345678' },
configItems: [
{
configId: 'smt.homepage.more_service',
configVersion: '0'
}
]
}).then(res => {
console.log(res)
})
}
解决谷歌浏览器跨域：
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/xxxx/Document/HandleCORS
参考：devServer
