跨域问题怎么破!比如No 'Access-Control-Allow-Origin' header is present on the requested resource.
这种问题老生常谈了,我就不细说了..大体说一下;
1: CORS
, 前后端都要对应去配置,IE10+
2: nginx
反向代理,一劳永逸 <-- 线上环境可以用这个
线下开发模式,比如你用了vue-cli
, 里面的 webpack 有引入了proxyTable
这么个玩意,
也可以做接口反向代理
// 在 config 目录下的index.js
proxyTable: {
"/bp-api": {
target: "http://new.d.st.cn",
changeOrigin: true,
// pathRewrite: {
// "^/bp-api": "/"
// }
}
}
// target : 就是 api 的代理的实际路径
// changeOrigin: 就是是变源,必须是...
// pathRewrite : 就是路径重定向,一看就知道
当然还有依旧坚挺的jsonp
大法!不过局限性比较多,比较适合一些特殊的信息获取!
为什么我的组件间的样式不能继承或者覆写啊!!!
单组件开发模式下,请确认是否开启了 CSS
模块化功能!!
也就是scoped
(vue-cli 里面配置了,只要加入这个属性就自动启用)
<style lang="scss" scoped></style>
为什么不能继承或者覆写呢,那时因为每个类或者 id 乃至标签都会给自动在css后面添加hash!
比如
// 写的时候是这个
.trangle{}
// 编译过后,加上了 hash
.trangle[data-v-1ec35ffc]{}
这些都是在 css-loader 里面配置!!!
axios
的 post
请求后台接受不到!
axios
默认是 json 格式提交,确认后台是否做了对应的支持;
若是只能接受传统的表单序列化,就需要自己写一个转义的方法...
当然还有一个更加省事的方案,装一个小模块qs
npm install qs -S
// 然后在对应的地方转就行了..单一请求也行,拦截器也行...我是写在拦截器的.
// 具体可以看看我 axios 封装那篇文章
//POST传参序列化(添加请求拦截器)
Axios.interceptors.request.use(
config => {
// 在发送请求之前做某件事
if (
config.method === "post"
) {
// 序列化
config.data = qs.stringify(config.data); // ***** 这里转义
}
// 若是有做鉴权token , 就给头部带上token
if (localStorage.token) {
config.headers.Authorization = localStorage.token;
}
return config;
},
error => {
Message({
// 饿了么的消息弹窗组件,类似toast
showClose: true,
message: error,
type: "error.data.error.message"
});
return Promise.reject(error.data.error.message);
}
);
作者:CRPER
链接:https://juejin.im/post/59fa9257f265da43062a1b0e
来源:掘金