在 Ubuntu 上使用 Axios 部署 ReactJS

Question

我们有 2 个不同的服务器：

Front end: http://front-end.com
Back end: http://back-end.com

反应部分就是我要部署的http://front-end.com

这 2 个是使用 Axios 连接的，它在我的本地使用 npm start
工作正常通过将 proxy: http://back-end.com 放在 package.json

上

问题

当我部署它时，使用 axios 的 REST API 连接根本无法工作

第一次尝试： 将 apache 服务到运行 build 文件夹
错误： 主页已加载，但所有 REST 调用均显示 404，检查后它尝试访问 http://front-end.com/rest_method_name 而不是它应该访问的 http://back-end.com/rest_method_name

第二次尝试： 运行按照建议serve -s build
错误：主页已加载，但所有 REST 调用 returns body

上的此文本 You need to enable JavaScript to run this app.

第三次尝试： 在 package.json 上删除代理，然后将完整的 url 放在所有 axios 调用上
错误：主页已加载，所有 REST 调用都出现 CORS 错误，但运行

如果后端位于不同的域名上，谁能告诉我如何正确部署 React 和 Axios？

编辑应@technogeek1995 的要求，这里是 Axios 请求 header

  axios.get('/login', {
    'headers': {
      'Authorization': `Basic ${token}`
    }
  })

我没有任何其他设置，除了 proxy: http://back-end.com 和上面的 Axios 代码

编辑 2 我已经按照建议添加了 CORS header，仍然没有成功。同样的错误 CORS 问题。我还确保已启用 a2enmod header

# Always set these headers.
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, author    ization, accept, client-security-token"

# Added a rewrite to respond with a 200 SUCCESS on every OPTIONS request.
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$  [R=200,L]

Answer 1

问了一圈，终于找到了问题所在。我完全看错了方向，我一直在http://front-end.com服务器上寻找。

在我的示例中，CORS 问题是由后端服务器 http://back-end.com 生成的。

Access-Control-Allow-Origin "*"

需要在服务于 REST 的后端服务器上添加 API。

在 Ubuntu 上使用 Axios 部署 ReactJS

Deploying ReactJS with Axios on Ubuntu

apache

web-deployment

cors

reactjs

axios

问题