vue前端跨域处理

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

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

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue #proxy

实战总结专栏收录该内容

17 篇文章

订阅专栏

本文介绍了在Vue项目中遇到跨域问题时的一种解决方法——通过配置代理服务器实现跨域请求。详细解释了如何在vue.config.js文件中设置devServer属性来完成代理配置。

原因：浏览器访问遵循同源策略，同源：协议/域名:端口要相同，当访问非同源地址就会出现跨域问题。

在vue中处理跨域的方法一般就是vue代理服务器proxy跨域。

在vue.config.js中进行配置

devServer: {
    // 端口号
    // port: 8890,
    // 配置是否自动启动浏览器
    open: false,
    // 是否启用https
    https: false,
    proxy: {
      // 代理
      "/api": {
        target: process.env.VUE_APP_SERVE_URl,     //要代理访问的路径
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  },

更详细的介绍可以看看这个：vue跨域处理