标签：Vue target pathRewrite 跨越 changeOrigin api 解决 true localhost

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

标签：Vue,target,pathRewrite,跨越,changeOrigin,api,解决,true,localhost
来源： https://blog.csdn.net/monk0271_chen/article/details/120356319

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。