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

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;
           }
        }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(5条)

报告相同问题?

问题事件

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

悬赏问题

  • ¥15 请使用蚁群算法解决下列问题,并给出我完整的代码
  • ¥20 关于php录入完成后,批量更新数据库
  • ¥15 请教往复密封润滑问题
  • ¥15 cocos creator发布ios包
  • ¥15 comsol压电材料数据
  • ¥35 用python实现除法算法中goldschmidt算法
  • ¥15 汇编代码转换成C代码
  • ¥15 除法算法中的归一化具体是怎么变的?
  • ¥20 集成电路的逻辑电路和晶体管简化图
  • ¥15 下载windows builder后的问题