侧边栏壁纸
  • 累计撰写 793 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

目 录CONTENT

文章目录

前端代理

Dettan
2021-04-10 / 0 评论 / 0 点赞 / 162 阅读 / 526 字
温馨提示:
本文最后更新于 2022-07-23,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
all in vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8090/', // 真是服务器的接口地址 // http://localhost:54321/json.data.json,
        secure: false, // 如果是 https ,需要开启这个选项
        changeOrigin: true, // 是否是跨域请求?肯定是啊,不跨域就没有必要配置这个proxyTable了.
        pathRewirte: {
          // 这里是追加链接,比如真是接口里包含了 /api,就需要这样配置.

          '/^api': 'api/'
          // 等价于
          // step 1  /api = http://localhost:54321/
          // step 2 /^api = /api + api == http://localhost:54321/api
        }
      }
    }
  }
}
proxyTable: {
  // 这里配置 '/api' 就等价于 target , 你在链接里访问 /api === http://localhost:54321
  '/api': {
    target: 'http://localhost:54321/', // 真是服务器的接口地址 // http://localhost:54321/json.data.json,
    secure: true, // 如果是 https ,需要开启这个选项
    changeOrigin: true, // 是否是跨域请求?肯定是啊,不跨域就没有必要配置这个proxyTable了.
    pathRewirte: {
      // 这里是追加链接,比如真是接口里包含了 /api,就需要这样配置.

      '/^api': 'api/', 
      // 等价于 
      // step 1  /api = http://localhost:54321/
      // step 2 /^api = /api + api == http://localhost:54321/api
    }
  }
 },
会有跨域问题
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  devServer: {
    proxy: 'http://localhost:8080'
  },
}
关于 pathRewrite 节点说明:
首先,在ProxyTable模块中设置了‘/api’,target中设置服务器地址,也就是接口的开头那段地址,例如http://localhost:54321/,然后我们在调用接口的时候,就可以全局使用/api,这时候/api的作用就相当于http://localhost:54321/,比如接口的地址是http://localhost:54321/api/json.data,我们就可以使用/api/json.data
那pathRewrite是用来干嘛的呢,这里的作用,相当于是替代/api,如果接口中是没有api的,那就直接置空,如果接口中有api,那就得写成{^/api:/api},可以理解为一个重定向或者重新赋值的功能。


0

评论区