zoukankan      html  css  js  c++  java
  • vue-cli配置跨域代理

    现在使用vue大多使用了前后端分离模式,因此游览器经常显示跨域失败的信息,现在跨域的方式很多种,主要分两大类,ajax跨域,dom跨域,具体的方法就不例举啦。

    vue-cli作为一个强大的脚手架,内置了一个简单的配置型跨域方式

    找到目录下的config文件下,index.js中dev配置对象中的proxyTable属性,这里是一个对象

    下面对这个对象属性进行解析:
    
     proxyTable: {
          '/api':{            //这里的key就是axios的baseURL
            target: 'http://127.0.0.1',    //访问域名
            changeOrigin: true,            //开启跨域
            pathRewrite:{  // 路径重写,
                '^/api': 'api/index.php'  // 替换target中的请求地址
            }
          }
        }
    
    

    也就是设置axios的baseURL可以只设置为'/api',然后在proxyTable里面定义匹配这个路径的代理配置对象,设置target为访问的域名,设置重写为访问域名的后缀,即域名后的地址,然后开启changeOrigin属性即可。

    注意:配置好后由于这个文件不在src下,不会触发构建,每次修改需要重新npm run dev 来使用新的配置,此时成功会看到命令行输出代理服务器配置信息

  • 相关阅读:
    04 类与对象
    03 方法
    02-JAVA语法基础
    大道至简第二章 读后感
    leetcode 65 有效数字
    leetcode 670 最大交换
    leetcode 49 字母异位词分组
    leetcode 71 简化路径
    leetcode 2 两数相加
    java compareTo 与 equals 区别
  • 原文地址:https://www.cnblogs.com/sefaultment/p/9710710.html
Copyright © 2011-2022 走看看