proxyTable解决跨域

一、跨域问题解决

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin
'http://localhost:11000' is therefore not allowed access
原因：浏览器的同源策略不允许跨域访问，所谓同源策略是指协议、域名、端口相同。
解决：采用proxyTable解决。

proxyTable是什么？
vue-cli提供的解决vue开发环境下跨域问题的方法，proxyTable的底层使用了http-proxy-middleware（https://github.com/chimurai/http-proxy-middleware），它是http代理中间件，它依赖node.js，基
本原理是用服务端代理解决浏览器跨域：

image.png

cms跨域解决原理：
1、访问页面http://localhost:11000/
2、页面请求http://localhost:11000/cms

由于url由http://localhost:31001/cms...改为“http://localhost:11000/cms."，所以不存在跨域

3、通过proxyTable由node服务器代理请求 http://localhost:31001/cms.
服务端不存在跨域问题

们进入 config/index.js 代码下如下配置即可：

dev: {

  // 静态资源文件夹
  assetsSubDirectory: 'static',

  // 发布路径
  assetsPublicPath: '/',

  // 代理配置表，在这里可以配置特定的请求代理到对应的API接口
  // 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
  // 使用方法：https://vuejs-templates.github.io/webpack/proxy.html
  proxyTable: {
 '/api/cms': {
      target: 'http://localhost:31001',
      pathRewrite: {
        '^/api': ' '   //实际请求去掉/api以空字符串代替

      }
    }
  },

  // 本地访问 http://localhost:11000
  host: 'localhost', // can be overwritten by process.env.HOST