解决Vue跨域问题 : 正向代理与反向代理

你需要做一个反向代理的东西 ===> 打开你的vue项目的config文件夹下的index.js

找到以下代码

dev: {
        proxyTable: {
          /api: {
            target: http://ip地址, //这里面是你要访问的IP地址
            changeOrigin: true,     //开启代理
            pathRewrite: {
              ^/api: /api
          }

    }

dev: { proxyTable: { /api: { target: http://ip地址, //这里面是你要访问的IP地址 changeOrigin: true, //开启代理 pathRewrite: { ^/api: /api } }

修改后：

dev: {
            proxyTable: {
                /queue-admin: {  // 使用"/queue-admin"来代替 API头部，可随意命名
                  //target: ...,  // 源地址 本地开发的API头部
                  target: "...",  // 配置到服务器后端的API头部
                  pathRewrite: {
                    ^/queue-admin: /queue-admin  // 路径重写，第一个与上面相同，第二个/queue-admin 为server.context-path（服务器的上下文）
                  },
                  // 以下解决https 访问问题。上面的可以访问http
                  changeOrigin: true,
                  secure: false,
                  headers: {
                    Referer: ...
                  }
                }
            }
         }

dev: { proxyTable: { /queue-admin: { // 使用"/queue-admin"来代替 API头部，可随意命名 //target: ..., // 源地址 本地开发的API头部 target: "...", // 配置到服务器后端的API头部 pathRewrite: { ^/queue-admin: /queue-admin // 路径重写，第一个与上面相同，第二个/queue-admin 为server.context-path（服务器的上下文） }, // 以下解决https 访问问题。上面的可以访问http changeOrigin: true, secure: false, headers: { Referer: ... } } } }

Tips：配置完这里之后一定要重新启动项目要不然会没有效果

你需要做一个反向代理的东西 ===> 打开你的vue项目的config文件夹下的index.js 找到以下代码 dev: { proxyTable: { /api: { target: http://ip地址, //这里面是你要访问的IP地址 changeOrigin: true, //开启代理 pathRewrite: { ^/api: /api } } 修改后： dev: { proxyTable: { /queue-admin: { // 使用"/queue-admin"来代替 API头部，可随意命名 //target: ..., // 源地址 本地开发的API头部 target: "...", // 配置到服务器后端的API头部 pathRewrite: { ^/queue-admin: /queue-admin // 路径重写，第一个与上面相同，第二个/queue-admin 为server.context-path（服务器的上下文） }, // 以下解决https 访问问题。上面的可以访问http changeOrigin: true, secure: false, headers: { Referer: ... } } } } Tips：配置完这里之后一定要重新启动项目要不然会没有效果