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

添加新评论