vite跨域配置踩坑，postman链接后端接口正常，但是前端就是不能正常访问-Toy模板网

这篇具有很好参考价值的文章主要介绍了vite跨域配置踩坑，postman链接后端接口正常，但是前端就是不能正常访问。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题一：怎么都链接不了后端地址

根据以下配置，发现怎么都链接不了后端地址，proxy对了呀。仔细看，才发现host有问题

// 本地运行配置，及反向代理配置
  server: {
    host: '0,0,0,0',
    port: 80,
    // cors: true, // 默认启用并允许任何源
    // open: true, // 在服务器启动时自动在浏览器中打开应用程序
    //反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
    proxy: {// 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
      '/api': {
        target: 'http://localhost/8090', // 通过代理接口访问实际地址。这里是实际访问的地址。vue会通过代理服务器来代理请求
        changeOrigin: true,
        ws: true,  // 允许websocket代理
        rewrite: (path) => path.replace(/^\/api/, '') // 将api替换为空
      }
    }
  }

这里是本地前端访问地址配置，不设置默认http://127.0.0.1:5173/都可以访问，但是如果设置了只有设置的 http://127.0.0.1:80/或者http://localhost:80/可以访问

    host: '0,0,0,0',
    port: 80,

问题来了：设置为port80，host:0,0,0,0或者host: '127.0.0.1',时，请求后端报404。不设置时就能正常访问。

原因：开发服务器选项 | Vite 官方中文文档

简单的说就是，设置为0000或者127.0.0.1:80可能监听的是其他服务端口，导致跨域失败。

指定服务器应该监听哪个 IP 地址。如果将此设置为 0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址。以下时vite官网内容：

postman可以前端不行,vite,vite,前端

问题二：[vite] ws proxy error: Error: connect ECONNREFUSED 127.0.0.1:80 at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1159:16)

本来已经能成功访问了，但是后面又报错

15:47:05 [vite] ws proxy error:
Error: connect ECONNREFUSED 127.0.0.1:80 at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1159:16)

原因：发现代理的地址有问题target: 'http://localhost:8090'写成了target: 'http://localhost/8090'，服了。可能之前访问成功也是因为改了这里

测试一下改回来：发现真的不是问题一那里的问题，噗，哈哈哈哈哈哈哈哈哈文章来源地址https://www.toymoban.com/news/detail-719498.html

 server: {
    host: '127.0.0.1',//设置为0000或者127.0.0.1:80可能监听的是其他服务端口，导致跨域失败
    port: 80,
    // cors: true, // 默认启用并允许任何源
    // open: true, // 在服务器启动时自动在浏览器中打开应用程序
    //反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
    proxy: {// 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
      '/api': {
        target: 'http://localhost:8090', // 通过代理接口访问实际地址。这里是实际访问的地址。vue会通过代理服务器来代理请求
        changeOrigin: true,
        ws: true,  // 允许websocket代理
        rewrite: (path) => path.replace(/^\/api/, '') // 将api替换为空
      }
    }
  }

到了这里，关于vite跨域配置踩坑，postman链接后端接口正常，但是前端就是不能正常访问的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！