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

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

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

浏览器发送跨域的ajax请求时，并不是请求发不出去，请求可以发出去，并且后台接收到请求后可以返回响应数据，但是浏览器不接收这些不同源的响应数据。

代理的原理：

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

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

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

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