在下刚入行，利用vue和node.js简单写了个前后端联动搜索的小网站，在本地测试的时候前端各项内容均可访问后端接口和数据库，各项功能完整，但是当我将代码放在服务器后，将前端地址改为我对外映射的ip（114.x.x.x:8080）后发现，外网利用该地址进入只能访问首页（登录页面，如下图），在开发者工具里面的网络里显示和后端没有建立连接，我尝试过将前端vite.confiig.js文件中的server：host修改为0.0.0.0，然后在后端的app.js路由里面监听0.0.0.0的内容，但在前端还是无法访问后端数据
（这是配置的图片，admin是前端的配置，api-dzj是后端的配置）
（这是访问的页面）
（这是后端app.js代码）
下面是我写的前端axios封装
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useAuthStore } from '@/stores/auth'
// 创建axios实例
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API,
timeout: 5000
})
// request拦截器
service.interceptors.request.use(
(config) => {
// do something 在发送请求前
const authStore = useAuthStore()
if (authStore.token) {
// 让每个请求携带token
// ["X-Token"]为自定义key
// 请根据实际情况自行修改
config.headers['token'] = authStore.token
}
return config
},
(error) => {
// do something 当请求错误
console.log(error) // for debug
return Promise.reject(error)
}
)
// respone拦截器
service.interceptors.response.use(
/**
* 如果你想获取 http 信息，例如 headers 或 status
* 请 return response => response
*/
/**
* 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
* 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
*/
(response) => {
return response.data
},
(error) => {
const { status, data } = error.response
let message
// 验证错误
const info = data.errors.map(item => `<li>${ item }</li>`)
message = `<ul>${ info.join('') }</ul>`
// 401 错误，Token 值错误，需要重新登录
const authStore = useAuthStore()
if (status === 401 && authStore.token) {
message = '登录信息错误'
// 重新登录
ElMessageBox.confirm(
'你已被登出，可以取消继续留在该页面，或者重新登录',
'确定登出',
{
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(async () => {
await authStore.resetToken()
location.href = '/login'
})
}
ElMessage({
message: message,
type: 'error',
dangerouslyUseHTMLString: true,
duration: 3 * 1000
})
return Promise.reject(error)
}
)
export default service
