关于Vue项目部署服务器遇到的一些接口问题

服务器部署的是宝塔面板。后端开发人员没有配置Cors的大前提下，可以参考该文档。

如果直接使用nginx就在nginx.conf文件配置下更改（应该是...目前还没改过）

那么首先引入一个概念，

Vue的Proxy代理路由

Proxy代理。在vite.config.ts里，将需要配置的接口路径统一放置在Proxy代码块中。这样在实际代码.get或.post调用时，系统会根据扫描到的关键字，如/api ： "https://xxxx"，识别到/api域名，则将页面跳转到https://xxxx。即

  server: {
    host: '0.0.0.0', // 监听所有可用的网络接口
    port: 8080, // 自定义端口号，例如使用 8080

    //代理配置
    proxy: {
      '/api': {
        target: 'http://xxxxxxx.com/',   //更换自己的域名信息
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },

这里不要将所用域名全部替换到target，会出现莫名奇妙的Bug（比如我的就莫名其妙被跳到百度...），到现在也没明白啥原因。只将target存储主域名就好了。

宝塔面板的伪静态配置

当在本地调试开发的时候，Proxy代理是可以用来测试开发效果的。但是一旦将项目上传到服务器，Proxy代理是失效的。原因是本地服务器和你的云服务器地址之类的全变了。所以如果后端开发人员能配置Cors，对前端来说就省去了再用相对地址的麻烦。

在宝塔面板如图配置。实际上就是把Proxy的代理重新复制一遍给宝塔面板。

如此修改后，保存项目，项目的http请求就接通了。跨域问题就被解决了。