vue-cli跨域配置 以及一些注意点

跨域配置

vue-cli搭建的项目需要自己新建一个vue.config.js配置文件：

在vue.config.js文件里配置跨域参数：

module.exports = {
    devServer:{
        open:true,
        proxy: {
            '/api': {
             //设置你调用的接口域名和端口号 别忘了加http
              target: 'http://localhost:8088/', 
              changeOrigin: true, //允许跨域
              pathRewrite: {
                '^/api': ''
                //会将请求/api/xuanke/index.php替换为/xuanke/index.php
             }
            }
        }
    }
}

配置好了，但还是vue默认的端口

根据我的踩坑经历，下面这一段解释建议你看一下，会避免一些问题
‘/api’ 是你请求开头必须写的格式，不是你后台接口的路径，例如：


我要访问的后端api为

根据我上面配置内容，我的get请求地址

this.$http.get("/api/xuanke/Student/login.php").then(res=>{
         console.log(res.data);
})

所以我可以根据简便这样配置：

proxy: {
     '/xuanke': {
     	target: 'http://localhost:8088/',
     	changeOrigin: true, 
        pathRewrite: {
            '^/xuanke': '/xuanke'
        }
     }
}

如果我根据第一种配置，然后请求地址写成了
/xuanke/Student/login.php
那就会出现这种问题：

很清楚可以看到这里的端口并不是我配置的跨域地址端口8088，而是vue脚手架默认的端口8080