• vue中的坑


    跨域问题怎么破!比如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 里面配置!!!

    axiospost 请求后台接受不到!

    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
    来源:掘金

  • 相关阅读:
    嵌入式系统编程和调试技巧
    使用Kotlin开发Android应用(II):创建新project
    2015 Multi-University Training Contest 2
    C#开发Unity游戏教程之游戏对象的属性变量
    Java开发project师案例-网络日志分析系统
    Flask
    Flask
    Flask
    Flask
    Flask
  • 原文地址:https://www.cnblogs.com/hfdj/p/7843934.html
Copyright © 2020-2023  润新知