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

2020-06-17  本文已影响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": "/",//和上面一样,将请求地址中前面的替换为后面的内容
        }
      }
    }
  }
};

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

上一篇下一篇

猜你喜欢

热点阅读