Question

我有一个使用webpack捆绑的网络应用程序，我将整个react / redux应用程序放在公共文件中，该文件将由nodejs（express-generator）提供。当我在localhost / local env中运行时，我的应用程序正常工作。但是当我部署到heroku时。我不能打电话。

以下是错误消息：

    bundle.js:19 GET https://glacial-cove-64389.herokuapp.com/users/ 401 (Unauthorized)

Object {err: Error: Request failed with status code 401 at e.exports (https://glacial-cove-64389.herokuapp.co…}
err
:
Error: Request failed with status code 401 at e.exports (https://glacial-cove-64389.herokuapp.com/bundle.js:19:10382) at e.exports (https://glacial-cove-64389.herokuapp.com/bundle.js:26:6821) at XMLHttpRequest._.(anonymous function) (https://glacial-cove-64389.herokuapp.com/bundle.js:19:9464)
__proto__
:
Object

最初我认为它可能是我的ROOT_URL所以我改变了它，下面是我的动作档案的一个例子。

const ROOT_URL = "//glacial-cove-64389.herokuapp.com"
const axiosOption = {headers: { authorization : localStorage.getItem('token')}}

/*Sign in user*/
export function signinUser({ email, password }){
  return function(dispatch){
    axios.post(`${ROOT_URL}/users/signin`, { email, password })
    .then(function(res){
      dispatch({ type: AUTH_USER })
      localStorage.setItem('token', res.data.token);
      browserHistory.push('/users');
    })
    .catch(function(err){
      dispatch(authError('Invalid email or password'))
      console.log({err});
    })
  }
}

所以会发生的是反应识别登录并将用户推送到正确的路线。但是一旦它到达主页面，它就会返回上面的错误消息状态代码401。

我遇到的主要问题是当我尝试执行无效的CRUD时

这是我的回购：https://github.com/boyboi86/API_basic_random

Answer 1

我发现了困难的方法..

如果您打算在带有快速生成器的脚手架中将所有内容放在公共文件中。将CORS放入Nodejs是不够的，因为现在你的axios（反应）使得调用也受到CORS的攻击，你必须在你的axios中配置以下内容：

axios.defaults.headers.post['Access-Control-Allow-Methods'] = 'PATCH, DELETE, POST, GET, OPTIONS';

这是为了确保允许所有拨打电话。当我查看响应标题时，我意识到了这一点。

在heroku中部署时无法调用ajax

1 个答案: