vue-cli4 解决向后端请求出现跨域问题（跨域代理）

设置代理解决跨域

在vue项目开发时，需要请求后端，通常就会出现跨域问题。有2种常用的解决方案：

• 后端设置允许跨域访问
• 前端通过代理进行访问后端

这里用的是前端代理方法：
vue- ciI4是没有build文件夹跟config文件夹，vue-cli4所有的配置都在Vue.config.js完成。
（vue-cli2.X跨域配置一般都在config中的index.js配置。vue-cli3跨域配置同4）
在项目根目录下创建vue.config.js文件

文件代码如下：

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

其中：
由于我的路径请求格式为/api/XXX，所以用的就是’/api’:{}。单引号内容根据实际情况进行调整

• port：端口号是前端的端口号
• open：启动项目是否自动打开浏览器
• targer：后端路径