[JavaScript知识库]Vue解决跨越问题

Vue解决跨越问题：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’

在根目录vue.config.js（没有则手动创建一个）添加如下代码：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8090',//服务端URL
                changeOrigin: true,
                pathRewrite: {                   //路径重写
                    '^/api': ''                     //选择忽略拦截器里面的单词
                },
            },
        }
    }
}

这里/api的意义是为了防止前后端路径相同导致冲突，所以还需要在所有URI中加上/api，同时如果有其他不同的服务端还可以这样区分：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8090', 
                changeOrigin: true,
                pathRewrite: {                   
                    '^/api': ''                     
                },
            },
            '/otherApi': {
                target: 'http://localhost:9090',
                changeOrigin: true,
                pathRewrite: {                   
                    '^/otherApi': ''               
                },
            },
        }
    }
}

最后，一定要重启npm！

*补充：上面方法只适合开发环境，当Vue项目打包成静态文件时，他的代理也就失灵了，因为代理的前提是本地必须有service