dpbug_cn 2022-11-11 13:56 采纳率: 50%
浏览 90
已结题

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

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

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 配置问题。
请指教,谢谢!

  • 写回答

6条回答 默认 最新

  • 游一游走一走 2022-11-11 14:23
    关注

    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;
           }
        }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
  • CSDN-Ada助手 CSDN-AI 官方账号 2022-11-11 16:54
    关注
    评论
  • 二九筒 2022-11-11 14:10
    关注

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

    评论
  • wczdsg 2022-11-11 15:52
    关注

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

    评论
  • dpbug_cn 2022-11-11 15:52
    关注

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

    评论 编辑记录
  • 普通网友 2022-11-11 22:19
    关注

    不知你解决了没?

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

    有问题来交流。

    评论
查看更多回答(5条)

报告相同问题?

问题事件

  • 系统已结题 11月20日
  • 已采纳回答 11月12日
  • 创建了问题 11月11日

悬赏问题

  • ¥20 C语言字符串不区分大小写字典排序相关问题
  • ¥15 关于#python#的问题:我希望通过逆向技术爬取1688搜索页下滑加载的数据
  • ¥15 学习C++过程中遇到的问题
  • ¥15 关于Linux的终端里,模拟实现一个带口令保护的屏保程序遇到的输入输出的问题!(语言-c语言)
  • ¥15 学习C++过程中遇到的问题
  • ¥15 请问,这个嵌入式Linux系统怎么分析,crc检验区域在哪
  • ¥15 二分类改为多分类问题
  • ¥15 Unity微信小游戏上调用ReadPixels()方法报错
  • ¥15 如何通过求后验分布求得样本中属于两种物种其中一种的概率?
  • ¥15 q从常量变成sin函数,怎么改写python代码?