Redux 调度 index.html 的内容
Redux dispatches the content of index.html
在测试动态创建的 link TO 时,我的 React 应用发生了一些问题,现在 redux 正在返回 index.html 的内容。我以前见过这个,但忘记了我是如何修复它的。目前的设置已经工作了几个月,所以我不想疯狂地改变一切。我通过在发送前检查 '' 解决了用户登录的 html 问题,但随后的发送会成功然后立即失败并且还包含 index.html 的内容.我创建了一个新用户,同样的事情发生了。我检查了数据库,清除了浏览器数据,检查了 DevTools 中的应用程序存储,并重置了我的电脑。真正奇怪的部分是我在测试服务器上的版本正在做同样的事情,它不会加载到另一台设备上。这是我在 React Developer Tools 中看到的状态示例:
token:null
isAuthenticated:true
loading:false
user:"<!doctype html><html lang="en"><head><meta charset="utf-8"/> .."
如果不是我的电脑那么比较两个版本怎么会破坏它们?
编辑
加载用户操作
export const loadUser = () => async dispatch => {
if (localStorage.token) {
setAuthToken(localStorage.token);
}
try {
const res = await axios.get(`${API_PREFIX}/auth`);
dispatch({
type: USER_LOADED,
payload: res.data
});
} catch (error) {
dispatch({
type: AUTH_ERROR,
payload: error.message
});
}}
后端
router.get('/', auth, async (req, res) => {
try {
const user = await User.findById(req.user.id).select('-password');
res.json(user);
} catch (err) {
console.error(err.message);
res.send(500).json({msg: 'User error'});
}
});
减速机
const initialState = {
token: localStorage.getItem('token'),
isAuthenticated: null,
loading: true,
user: null,
online: null,
}
export default function(state = initialState, action) {
const { type, payload } = action;
switch(type){
case USER_LOADED:
return {
...state,
isAuthenticated: true,
loading: false,
user: payload
}
case REGISTER_SUCCESS:
case LOGIN_SUCCESS:
console.log(`\n\n\nLOGIN PAYLOAD: ${JSON.stringify(payload)}`)
localStorage.setItem('token', payload.token);
return {
...state,
...payload,
isAuthenticated: true,
loading: false
}
case REGISTER_FAIL:
case AUTH_ERROR:
case LOGIN_FAIL:
case LOGOUT:
localStorage.removeItem('token');
return {
...state,
token: null,
isAuthenticated: false,
loading: false
}
case ONLINE:
return{
...state,
online: payload
}
default:
return state;
}
}
您是在请求获取用户对象吗?我认为它只是获取一个站点(可能是你自己的)而不是获取用户对象。
请分享您获取用户并将其存储到状态的代码
原来问题不是 redux。我添加了 app.get('/*' ... 包罗万象,以防止在重新加载时出现“Cannot GET /route”,但它在我的路由之前,这意味着我的 api 调用正在返回 html.
之前(server.js):
const root = require('path').join(__dirname, 'client', 'build');
app.use(express.static(root));
app.get('/*', (req, res) => {
res.sendFile('index.html', { root });
});
app.use(...);
之后:
app.use(...);
...
app.get('/*', (req, res) => {
res.sendFile('index.html', { root });
}
在测试动态创建的 link TO 时,我的 React 应用发生了一些问题,现在 redux 正在返回 index.html 的内容。我以前见过这个,但忘记了我是如何修复它的。目前的设置已经工作了几个月,所以我不想疯狂地改变一切。我通过在发送前检查 '' 解决了用户登录的 html 问题,但随后的发送会成功然后立即失败并且还包含 index.html 的内容.我创建了一个新用户,同样的事情发生了。我检查了数据库,清除了浏览器数据,检查了 DevTools 中的应用程序存储,并重置了我的电脑。真正奇怪的部分是我在测试服务器上的版本正在做同样的事情,它不会加载到另一台设备上。这是我在 React Developer Tools 中看到的状态示例:
token:null
isAuthenticated:true
loading:false
user:"<!doctype html><html lang="en"><head><meta charset="utf-8"/> .."
如果不是我的电脑那么比较两个版本怎么会破坏它们?
编辑
加载用户操作
export const loadUser = () => async dispatch => {
if (localStorage.token) {
setAuthToken(localStorage.token);
}
try {
const res = await axios.get(`${API_PREFIX}/auth`);
dispatch({
type: USER_LOADED,
payload: res.data
});
} catch (error) {
dispatch({
type: AUTH_ERROR,
payload: error.message
});
}}
后端
router.get('/', auth, async (req, res) => {
try {
const user = await User.findById(req.user.id).select('-password');
res.json(user);
} catch (err) {
console.error(err.message);
res.send(500).json({msg: 'User error'});
}
});
减速机
const initialState = {
token: localStorage.getItem('token'),
isAuthenticated: null,
loading: true,
user: null,
online: null,
}
export default function(state = initialState, action) {
const { type, payload } = action;
switch(type){
case USER_LOADED:
return {
...state,
isAuthenticated: true,
loading: false,
user: payload
}
case REGISTER_SUCCESS:
case LOGIN_SUCCESS:
console.log(`\n\n\nLOGIN PAYLOAD: ${JSON.stringify(payload)}`)
localStorage.setItem('token', payload.token);
return {
...state,
...payload,
isAuthenticated: true,
loading: false
}
case REGISTER_FAIL:
case AUTH_ERROR:
case LOGIN_FAIL:
case LOGOUT:
localStorage.removeItem('token');
return {
...state,
token: null,
isAuthenticated: false,
loading: false
}
case ONLINE:
return{
...state,
online: payload
}
default:
return state;
}
}
您是在请求获取用户对象吗?我认为它只是获取一个站点(可能是你自己的)而不是获取用户对象。
请分享您获取用户并将其存储到状态的代码
原来问题不是 redux。我添加了 app.get('/*' ... 包罗万象,以防止在重新加载时出现“Cannot GET /route”,但它在我的路由之前,这意味着我的 api 调用正在返回 html.
之前(server.js):
const root = require('path').join(__dirname, 'client', 'build');
app.use(express.static(root));
app.get('/*', (req, res) => {
res.sendFile('index.html', { root });
});
app.use(...);
之后:
app.use(...);
...
app.get('/*', (req, res) => {
res.sendFile('index.html', { root });
}