vue-cli创建项目设置跨域请求

最新推荐文章于 2025-07-15 09:27:25 发布

原创最新推荐文章于 2025-07-15 09:27:25 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何解决使用 Vue CLI 创建项目时遇到的跨域问题。通过设置代理服务器 ProxyServer，实现本地开发环境下对后台接口的有效调用，避免跨域错误。

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

为什么用vue-cli创建之后的项目调用后台接口会出现跨域的问题。直接调去后台接口就会出现404。是因为vue的localhost与访问域名不一致，导致的跨域问题。

所以在这里就用到了代理，也就是代理服务器-Proxy Server，也就是网络信息的中转站。

设置代理：

在config／index.js中，找到dev:{}, 在这里面设置一个proxyTable

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {

target: 'http://localhost:9090/', // 设置你调用的接口域名和端口号，如果协议是https 的，还需要加一个参数，secure:false; changeOrigin: true, // 跨域 pathRewrite: { '^/api': ''//这里就是用api替换我们的target，后面组件中调用接口直接可以用api来替换。 } } } },

ok ,这个时候我们请求接口就不存在跨域问题了。

⚠️：原接口是http://localhost:8080/niahao;

页面访问的接口是：http://localhost:8080/api/niahao;

这里是正确的。

未完待续……