zoukankan      html  css  js  c++  java
  • vue-cli3 跨域代理proxy总是失败的原因

    在vue项目开发中,为了调试方便,我们需要配置跨域代理proxy。根据vue-cli3官方文档,在vue.config.js配置如下

    // vue.config.js
    module.export={
          devServer: {
                proxy: {
                      '/api':{
                            target: 'http:// your.proxy.site', // 
                            ws: true, // websockets
                            changeOrigin: true,  // needed for virtual hosted sites
                            pathRewrite: {
                                  '^/api': ''
                            }
                      }
                }
          }
        
    }
    
    

    结果发现代理无效,浏览器还是会报跨域错误,抓耳挠腮好久,最后终于发现代理写的没有问题,问题是项目异步请求接口中没有拼接 /api 所导致,还有就是接口中本来就是以/api开头的,这时候会让人很混乱,搞不清哪个是代理地址字符串,哪个是真正接口中的字符串。所以分析对了之后,我用下面的方法:

    // vue.config.js
    module.export={
          devServer: {
                proxy: {
                      '/proxy':{
                            target: 'http:// your.proxy.site', // 
                            ws: true, // websockets
                            changeOrigin: true,  // needed for virtual hosted sites
                            pathRewrite: {
                                  '^/proxy': ''
                            }
                      }
                }
          }
        
    }
    
    

    这样,就不会出现和原有接口中的字符串混乱,然后在接口地址中拼接上 /proxy,去请求接口,发现问题已经搞定了。

  • 相关阅读:
    函数二
    python控制台输出带颜色的文字方法
    is 和 == 的区别
    基本数据类型(dict)
    基本数据类型(list,tuple)
    基本数据类型(int,bool,str)
    Python运算符与编码
    Java并发编程:synchronized
    泛型中? super T和? extends T的区别
    java中的匿名内部类总结
  • 原文地址:https://www.cnblogs.com/gruguy/p/vue-proxy-orign-cross.html
Copyright © 2011-2022 走看看