前端解决vue跨域问题

 No 'Access-Control-Allow-Origin' header 看到这个报错就知道是跨域了。当然最简单直接的肯定是后端接口配置允许跨域访问，不过，现在前端大部分都在用框架开发，说下在vue项目下前端配置允许跨域。配置完一定要重新运行项目才会生效。还有就是一定不能设置axios的baseUrl，不然设置的跨域代理也是不生效的。

在src文件夹平级创建一个vue.config.js文件，添加跨域配置

module.exports = {
    devServer: {
        proxy: { //配置跨域
            '/api': {
                target: 'https://www.csdn.net/', //这里后台的地址模拟的;应该填写你们真实的后台接口
                changOrigin: true, //允许跨域
                pathRewrite: {
                    /* （1）：不需要重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false 时
                    实际上访问的地址是：https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false,因为本身是有/api，所以是不需要这个重写的配置的
                    */
                    /* （2）重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时
            实际上访问的地址是：http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api
           */                                
                    '^/api': ''
                }
            },
        }
    },
}

在代码里调用接口的时候直接/api开头就可以，比如：

this.$axios.get('/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false').then(res=>{
    console.log(res)
})