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，基
本原理是用服务端代理解决浏览器跨域：

cms跨域解决原理：
1、访问页面http://A.A.com
2、页面请求http://B.B.com

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

proxyTable: {
      //后端配置了 跨域允许域名，所以本地开发只能配置代理
      '/api': {  //代理地址
          target: 'http://A.A.com',  //需要代理的地址
          changeOrigin: true,  //是否跨域
          secure: true,
          pathRewrite: {
              '^/api': ''   //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉
          },
          onProxyReq: function (proxyReq, req, res) {
            if (proxyReq.getHeader("origin")) {
              proxyReq.setHeader("origin", 'http://B.B.com')  //后 允许跨域的 地址 ，如果后端加了限制，需要加上这部分
            }
            console.log("原路径：" + req.originalUrl, "代理路径：" + req.path + '：'+ proxyReq.getHeader("origin"))
          }
      }
    },

标签: none

添加新评论