最详细的devServer.proxy的配置讲解，看完你就明白为何会报No ‘Access-control-Allow-0rigin“header is present on the requeste

最新推荐文章于 2025-10-12 12:46:23 发布

原创最新推荐文章于 2025-10-12 12:46:23 发布 · 2.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #axios #proxy #devServer

vue 专栏收录该内容

33 篇文章

订阅专栏

devServer.proxy用于开发环境中的API请求转发。它并不会实际处理跨域问题，而是通过代理将前端发出的请求重定向到不同的服务器。这样，前端和后端的交互都由devServer处理，从而避免浏览器的同源策略限制。

工作原理：

客户端请求发到devServer。
devServer根据proxy配置将请求转发到目标后端服务器。
后端返回的数据再通过代理返回给前端。

为什么能解决跨域问题：

浏览器中的跨域问题源于同源策略，而devServer实际上并不跨域请求，而是将请求代理到后端服务器，使得浏览器认为请求是同源的。

示例讲解：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend-server.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
};

在这个例子中，所有以 /api 开头的请求都会被代理到后端服务器 http://backend-server.com，从而规避跨域问题。

/api这是代理规则的路径匹配模式。当客户端请求的URL路径以/api开头时，该请求将会被代理到指定的目标服务器。例如，如果客户端请求http://frontend.dev/api/some-resource，那么这个请求将会被代理到目标服务器http://backend-server.com。
target: 'http://backend-server.com' target属性指定了代理的目标服务器地址。所有匹配路径模式的请求都会被转发到这个地址。在这个例子中，所有以/api开头的请求都会被重定向到http://backend-server.com。
changeOrigin: true changeOrigin属性用来指示是否应该改变请求的起源信息。当设置为true时，代理会修改请求的起源信息（如主机名、协议等），使得后端服务器不会看到前端服务器的地址，而是看起来像是直接请求的。
pathRewrite: { '^/api': '' } pathRewrite属性用于重写请求路径。在这个配置中，它移除了所有被代理请求中的/api前缀。例如，如果客户端请求的是http://frontend.dev/api/some-resource，那么经过重写后，实际发送到后端服务器的请求将是http://backend-server.com/some-resource。

真实案例分析

比如我要请求的真实服务器地址是https://exemple.cn/api/system/entry/listAll
在这里插入图片描述
影响最终请求地址的最终因素有：
.env配置文件

vue.config.js 或 vue.config.ts 或是其他，具体是什么，你项目使用的是什么决定
在这里插入图片描述
调用的接口地址，因为我在.env里配置了baseURL所以我这里就不写/api了

上面那三处的配置，当然也可能是两处（如果你没有配置.env）最终会生成你真实的服务器接口地址https://exemple.cn/api/system/entry/listAll

如果一切顺利的话，你将如愿拿到自己想要的数据，如果最终生成的接口地址不是你将要调用的https://exemple.cn/api/system/entry/listAll这个地址，控制台会报错has beenblocked by CORs policy: No 'Access-control-Allow-0rigin"header is present on the requested resource.这是由于浏览器的同源策略限制，也就是所谓的跨域造成的。

如果觉得我的分享对你有帮助，欢迎三连哦，么么哒!