# 关于 Vue.proxyTable 是干什么的?以及如何配置? (opens new window)

1.proxyTable的原理

首先明白同源策略:即协议，域名，端口都相同，而此策略是在浏览器端要遵循的约束，而如果是在服务器端就无需遵循同源策略。

vue-cli的proxyTable用的是http-proxy-middleware中间件，该中间件本质上是在本地开了一个服务器dev-server，所有的请求都通过这里转发出去，即把浏览器的发送请求代理转发到代理服务器上，再由代理服务器发送请求给目标服务器，从而解决跨域问题。

这篇博客只是说明配置中最重要的内容 proxyTable 1.配置代理服务器， vue-cli归根结底使用的还是webpack，所以需要对其进行相关配置，如果你的工程根目录里没有vue.config.js文件，那就在config文件夹下新建一个index.js，然后做如下配置：

module.exports = {
// Various Dev Server settings
 dev: {
   assetsSubDirectory: 'static',// 静态资源文件夹
   assetsPublicPath: '/',// 发布路径
   // 代理配置表，在这里可以配置特定的请求代理到对应的API接口
   // 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
   proxyTable: {
    '/api': { 
    //这里配置'/api' 就等价于target的内容, 你在链接里访问/api === http://localhost:8080,就是用/api代替那一长串重复的东西,api就是你起的接口服务名，有时候会有好多服务名，而且不都是api这种形式的，我们要注意，意思就是：在写接口路径时不用写那么长，而是用服务名代替，本来完整的接口路径是这一样的：http://127.0.0.100:8080/api/lbjk/saveUserInfoWebservice?userNum=123&depNum=456
//但是我们在api.js中，也就是封装的api层，是这样的：url: '/lbjk/saveUserInfo', 简写，然后在加上target中的就是：http://localhost:8080/api/lbjk/saveUserInfo完整的接口路径就是这样的
        target: 'http://localhost:8080/api', // 接口的域名
        // target: 'http://127.121.1.110:1000/api', // 如果要访问别人的本地服务则这里改成别人的ip和端口即可
        secure: true, // 如果是 https ,需要开启这个选项
        changeOrigin: true, // 是否是跨域请求?肯定是啊,不跨域就没有必要配置这个proxyTable了.
        pathRewirte: { // 路径重写
          // 这里是追加链接,比如真是接口里包含了 /api,就需要这样配置.
          '/api': '', 
          // 等价于 
          // step 1  /api = http://localhost:54321/
          // step 2 /^api = /api + api == http://localhost:54321/api
    }
   }
  }
  // 本地访问 http://127.0.0.1:8080
  host: '127.0.0.1', // can be overwritten by process.env.HOST
  port: '8080',// can be overwritten by process.env.PORT, if port is in use, a free one will be determined
  https: false,
  hotOnly: false,
  // Use Eslint Loader?
  // If true, your code will be linted during bundling and
  // linting errors and warnings will be shown in the console.
  useEslint: true,
  // If true, eslint errors and warnings will also be shown in the error overlay
  // in the browser.
  showEslintErrorsInOverlay: false,
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

//---------------------------------------------------------------------------------------------------------------------------------------------------------

devServer 就是vuecli在开发环境给我们提供的一个代理服务器 (opens new window),(使用的是 http-proxy-middleware)

devServer 就相当于用一个中间件服务器来访问，服务器是没有同源策略的

  devServer: {
    host: "localhost",//配置本项目运行主机
    port: 8080,//配置本项目运行端口
    //配置代理服务器来解决跨域问题
    proxy: {
      // ‘/api’ 的作用就是 替换 baseURL 的，假如这里我用的 localhost：8080 ,前端请求时直接用 /api 就行了
      //  ‘/api’ 只在前端请求时添加，而后端不需要添加 /api 这个路径
      "/api": {
        target: "http://localhost:3008", //配置要替换的后台接口地址
        changOrigin: true, //配置允许改变Origin
        ws: true, // proxy websockets
        pathRewrite: {
          "^/api": "/",
          //pathRewrite: {'^/api': '/'} 重写之后url为 http://localhost：8080/xxxx
          //pathRewrite: {'^/api': '/api'} 重写之后url为http://localhost：8080/api/xxxx
        },
      },
    },
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

知识库

Choose mode

# 关于 Vue.proxyTable 是干什么的?以及如何配置? (opens new window)