VueCli4前端解决跨域问题

设置代理解决跨域

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

1、后端设置允许跨域访问

2、前端通过代理进行访问后端

这里用的是前端代理方法：

vue- ciI4是没有build文件夹跟config文件夹，所有的配置都在Vue.config.js完成。

vue-cli2.X跨域配置一般都在config中的index.js配置。

vue-cli3跨域配置同vue- ciI4

在项目根目录下创建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：后端路径