前端配置代理解决跨域问题

最新推荐文章于 2025-05-10 19:27:25 发布

原创最新推荐文章于 2025-05-10 19:27:25 发布 · 347 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #webpack

前端常见问题及解决方法专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在Vue CLI 3.x环境下，如何在vue.config.js或通过http-proxy-middleware设置Webpack代理，以解决开发阶段跨域问题。通过代理，可以将'/api'路径的请求转发到指定的目标地址（如'http://127.0.0.1:8080'），实现路径重写和跨域支持，方便前端与后端接口的联调。

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

webpack配置代理

webpack.config.js中配置

vue脚手架构架的项目(vue-cli@3.**下)项目根目录下新建 vue.config.js 文件中配置

    module.exports = {
    devServer: {
        host: "localhost", //要设置当前访问的ip 否则失效
        port: 8081,//当前web服务端口
        open: false, //浏览器自动打开页面
        //可设置多个代理
        proxy: {
          '/api': {  //'/api'是要转发的地址 如果API中包含'/api' 则开始匹配
            target: 'http://127.0.0.1:8080',//目标地址（后端接口地址）
            ws: true,//是否代理websocket
            changeOrigin: true,//是否跨域
            pathRewrite: {
              '^/api': ''//url重写
              // 这里 /api 相当于 http://127.0.0.1:8080
              // 如果要请求  http://127.0.0.1:8080/login 请求时 写成 /api/login
              //若果使用axios 可以配置 axios.defaults.baseURL='/api' 请求时直接写 /login
            }
          }
        }
    }
}

http-proxy-middleware配置代理

webpack.config.js 文件没有暴露在外面的时候可以使用该方法

安装 http-proxy-middleware
src下新建setupProxy.js

const {createProxyMiddleware} = require('http-proxy-middleware');
module.exports = function (app) {
    app.use('/api', createProxyMiddleware({
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        pathRewrite: {
            '^/api': '',
        },
    }))
}