vue cli3.0/4.0 代理跨域

跨域

在vue根性到3.0以上时，跨域文件的位置也发生了变化，需要在src同级目录下新建一个vue.config.js文件
其中写入跨域webpack和跨域的配置。之前也在网上找了许多，发现有些有个别字段有问题导致无法使用
就把自己用的发出来对比对比
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210202112214445.png#pic_center)

注意时在项目文件夹中与src文件夹同级

配置

下面就把跨域的具体配置发出来，这只是跨域的，并不包含webpack

module.exports = {
  // 配置跨域代理
    devServer: {
        // Paths
        host: 'localhost',
        port: '8080',
        https: false,
        open: true,
        proxy: {
          '/api': { // 匹配所有以 '/api'开头的请求路径
            target: 'http://www.baidu.com:2300', // 代理目标的基础路径
            changeOrigin: true, // 支持跨域
            pathRewrite: {// 重写路径: 去掉路径中开头的'/api'
              '^/api': ''
            }
          }
        }
    }
}

在页面当中的使用方式：

this.$http.get("/api/getdata")	//这里api就会被替换成你配置的地址 如：http://www.baidu.com:2300