开发环境下 vue proxyTable 配置代理解决跨域

vue + webpack 构建的项目解决浏览器跨域问题

浏览器同源策略是浏览器的一种保护机制。

浏览器发送跨域的ajax请求时，并非请求发不出去，请求能够发出去，而且后台接收到请求后能够返回响应数据，可是浏览器不接收这些不一样源的响应数据。

代理的原理：

• 代理的位置：web服务器
• 代理拦截浏览器发出的ajax请求，将其转发给目标后台服务器，而后获取到响应后再将响应发回给浏览器。因为代理的位置是在web服务器，也就是浏览器的同源策略所限制的域内，因此浏览器接收到此响应后不会将其视为危险资源，会正常解析执行。

在 config/index.js 中配置 proxyTable 代理，以下图所示：

proxyTable: {  // 配置代理
  '/api': {  // 匹配全部以 '/api' 开头的请求路径
    target: 'http://localhost:4000',  // 代理目标的基础路径
    changeOrigin: true,   // 支持跨域
    pathRewrite: { // 重写路径： 去掉路径中开头的'/api'
      '^/api': ''
    }
  }
},

此方法能够解决开发环境下的跨域问题，生产环境还需配合后端解决。