vue-cli 配置proxyTable解决跨域 配置了但是无效，还是本地的服务器

Posted 2023-05-16

参考技术A 跨域问题来源于javascript的同源策略，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。

vue-cli 跨域proxyTable 中的pathRewrite配置

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: ‘static‘,
    assetsPublicPath: ‘/‘,
    proxyTable: {  //只能在开发环境下进行跨域，上线要进行反向代理nginx设置
      ‘/appstore‘: {
        target: ‘ip:port‘, //后端接口地址
        changeOrigin: true, //是否允许跨越
        pathRewrite: {
            ‘^/appstore‘: ‘/appstore‘, //重写,

            //这里的配置是正则表达式，以/appstore开头的将会被用‘/appstore’替换掉，假如后台文档的接口是 /appstore/list/xxx

            //前端api接口写：axios.get(‘/appstore/list/xxx‘) ， 被处理之后实际访问的是：ip:port/appstore/list/xxx

        }
      }
    },
}

‘^/appstore‘: ‘‘,  这种接口配置出来 ip:port/login

‘^/appstore‘: ‘/appstore‘,  这种接口配置出来 ip:port/appstore/login

注：设置proxyTable代理 在vue-cli构建项目后生成的开发环境下，直接修改config/index.js文件

proxyTable 中的 ‘/appstore‘代表什么意思？
答：首先用代理就要有个标识，告诉它这个连接要用代理，不然的话，一些html、css、js静态资源都跑去代理，我们的目的是跨域时接口使用代理，静态文件用本地加载
‘/appstore‘:{}告诉node,接口只要是‘/appstore‘开头的才用代理，所以接口就要写成/appstore/xx/xx,最后的路径就是ip:port/appstore/xx/xx
如果接口中没有appstore字段,那就用‘^/appstore‘: ‘‘, 最后的路径就会变成ip:port/xx/xx