nginx部署vue3项目访问其它网站失败

Question

问题遇到的现象和发生背景

vite+vue3项目，本机开发调试正常，nginx部署后，项目内访问其它网站的功能失效。
项目内部通过axios访问onenet和baidu服务器，在vite.config.js中进行了反向代理配置，如下：

export default defineConfig({
  server: {
    port: 5174,
    open: true,
    https: false,
    proxy: {
      '/spm_api': {
        target: 'http://127.0.0.1:3007/', // 部署服务器提供的 api 服务
        changeOrigin: true
      },
      '/onenet': {
        target: 'http://api.heclouds.com/',   // OneNet 服务器地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/onenet/, '') 
      },
      '/baiduMap': {
        target: 'https://api.map.baidu.com/',  // Baidu 服务器地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/baiduMap/, '')
      }
    },
    host: '0.0.0.0'   // 主机地址，用于局域网中访问页面
  }
  ...
})

在 vue 中对 axios 访问部署服务器 api 服务进行了配置，如下：

const service = axios.create({
  baseURL: '/spm_api', 
  timeout: 5000
})

在 vue 中通过 axios 访问 OneNet 服务器和 Baidu 服务器配置代码如下：

export const getCacheData = async (data) => {
  return await axios({
      method: 'get',
      url: '/onenet/devices/' + data.deviceId + '/datapoints?datastream_id=a',
      headers: {
        'api-key': data.apikey
      }
    })
}

export const getBaiduData = async (coords) => {
  return await axios({
    method: 'get',
    url: '/baiduMap/geoconv/v1/?coords=' + coords
  })
}

服务器部署环境为 centOs + Nginx，nginx.conf 配置如下：

    #虚拟主机配置
    server {
        listen       80;
        listen       443 ssl;    
        server_name  www.thinkingST.xyz;
        
        #根目录的配置: 
        location / {
            root   /nginx/dist/spm/;
            index  index.html index.htm;
        }

        #api目录的配置:
        location ~/spm_api/ {
            proxy_pass http://127.0.0.1:3007;
            proxy_set_header Host      $host;
            proxy_set_header X-Real-IP $remote_addr;
        }
    ......
    }

服务器地址为https://www.thinkingST.xyz/
发布后，运行网页功能正常，能够通过 https://www.thinkingST.xyz/spm_api/ 获取相关api服务，但无法访问 OneNet 和 Baidu API。
发现访问的链接是：http://www.thinkingST.xyz/onenet/devices/…… 和 https://www.thinkingST.xyz/baiduMap/geoconv/……， 并不是我需要的 http://api.heclouds.com/devices/…… 和 https://api.map.baidu.com/geoconv/%E2%80%A6%E2%80%A6

上述项目在本地 VsCode 开发环境中调试正常，spm_api 服务通过 node.js 启动，vue3项目通过vite启动，各项功能均调试正常，将vue3项目部署在服务器后出现上述问题，感觉像是 Nginx 配置问题。
请指教，谢谢！

Answer 1

Nginx 也得做vite的事，其他网站给代理下

    #虚拟主机配置
    server {
        listen       80;
        listen       443 ssl;
        server_name  www.thinkingST.xyz;

        #根目录的配置:
        location / {
            root   /nginx/dist/spm/;
            index  index.html index.htm;
        }

        #api目录的配置:
        location ~/spm_api/ {
            proxy_pass http://127.0.0.1:3007;
            proxy_set_header Host      $host;
            proxy_set_header X-Real-IP $remote_addr;
        }

       location = /onenet {
           proxy_pass http://api.heclouds.com;
           proxy_set_header Host      $host;
           proxy_set_header X-Real-IP $remote_addr;
       }

       location = /baiduMap {
           proxy_pass https://api.map.baidu.com;
           proxy_set_header Host      $host;
           proxy_set_header X-Real-IP $remote_addr;
       }
    }

Answer 2

• 你可以参考下这篇文章：nginx中部署多vue项目(亲自踩坑)

Answer 3

vue中你设置的axios中都把baseurl写死了，访问的都是本地/spm_api这个地址，所以不管怎么访问都是你服务器地址

Answer 4

/onenet和/baiduMap在nginx里就没配啊，怎么访问得了

Answer 5

找到问题了，在vite.config.js中，对onenet和baiduMap的反向代理设置中均rewrite空了，但是在nginx代理时没有进行rewrite

Answer 6

不知你解决了没？

这个问题不难；
确实是你配置的问题。

有问题来交流。