美文网首页
关于vue中配置代理请求(配置跨域)

关于vue中配置代理请求(配置跨域)

作者: 灬深碍灬 | 来源:发表于2020-06-17 11:39 被阅读0次

    刚接手个项目,上手的时候想看下请求接口:

    请求接口

    那尼?为啥是localhost。。。当时我的心里真的是有一万只草泥马在奔腾,因为之前只是看过,没有真实的使用过,第一次碰到的时候,心里还是懵逼的,现在基本熟悉之后,把配置代理这一块整理一下吧。
    配置代理分两种情况吧,一种是可以看到config文件夹的,另一种当然就是不可以看到文件夹的啦,我下面就对这两种情况具体说一下吧。

    一、有config文件夹的

    在文件夹之内默认的应该有这三个文件:

    有config文件夹的

    在index.js文件内找到dev的配置:

    dev: {
        env: require('./dev.env'),
        port: 8089,
        autoOpenBrowser: false,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {//重点是配置这里
          '/web/api': {
            target: 'http://XX.XX.XX.XX:8081',//真实转换成的后台请求地址,别忘了加http(https)
            changeOrigin: true,//在这里设置是否跨域
            pathRewrite: {//重定向
              '^/web/api': '/'
              //这里可以理解为正则,就是将前面匹配到的替换为后面的内容
              //写法和正则有点类似
            }
          }
        },
        // CSS Sourcemaps off by default because relative paths are "buggy"
        // with this option, according to the CSS-Loader README
        // (https://github.com/webpack/css-loader#sourcemaps)
        // In our experience, they generally work as expected,
        // just be aware of this issue when enabling this option.
        cssSourceMap: false
      }
    

    二、木有config文件夹的

    当没有config文件夹的时候,用编辑器打开的时候会看到下面的文件:

    配置文件

    重点还是看vue.config.js,打开配置文件的时候,在文件内部有devServer的配置:

    module.exports = {
      //其余配置...
      devServer: {
        port: 8000,
        open: false, //项目启动时是否自动打开浏览器,我这里设置为false,不打开,true表示打开
        changeOrigin: true,//是否跨域
        proxy: {
          "/trccw": {
            //真实转换成的后台请求地址,别忘了加http(https)
            target: "http://XX.XX.XX.XX:8081/trccw", 
            pathRewrite: {//重定向
              "^/trccw": "/",//和上面一样,将请求地址中前面的替换为后面的内容
            }
          }
        }
      }
    };
    

    对了,最重要的一点:每次修改完之后需要重启项目!

    相关文章

      网友评论

          本文标题:关于vue中配置代理请求(配置跨域)

          本文链接:https://www.haomeiwen.com/subject/iaijxktx.html