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 配置问题。
请指教，谢谢！
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;
}
}
vue中你设置的axios中都把baseurl写死了，访问的都是本地/spm_api这个地址，所以不管怎么访问都是你服务器地址
/onenet和/baiduMap在nginx里就没配啊，怎么访问得了
找到问题了，在vite.config.js中，对onenet和baiduMap的反向代理设置中均rewrite空了，但是在nginx代理时没有进行rewrite
不知你解决了没？
这个问题不难；
确实是你配置的问题。