vue跨域使用 http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）

最新推荐文章于 2025-02-21 23:43:22 发布

springAsahi

最新推荐文章于 2025-02-21 23:43:22 发布

阅读量4.3k

点赞数

分类专栏： vue 文章标签： vue.js 前端解决跨域 http-proxy-middleware vue-cli手脚架 vue使用代理解决跨域

本文链接：https://blog.youkuaiyun.com/springAsahi/article/details/80604534

版权

本文介绍了在Vue CLI搭建的项目中，如何利用http-proxy-middleware解决前端开发过程中的跨域问题。通过在`config/index.js`的`proxyTable`配置代理规则，将API请求路径 `/api` 映射到实际的远程服务器URL `http://www.baidu.com/test`。在打包部署时，需将`/api`替换为实际的服务器地址，以确保跨域问题得到正确处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）

例如请求的url:“http://www.baidu.com/test”

打开config/index.js,在proxyTable中添写如下代码：

proxyTable: { 
    '/api': {  //使用"/api"来代替"http://www.baidu.com" 
        target: 'http://www.baidu.com', //源地址 
        changeOrigin: true, //改变源 
        pathRewrite: { 
            '^/api': 'http://www.baidu.com' //路径重写 
        } 
    } 
}<