如何修复生产中部署的解决方案的“No \'Access-Control-Allow-Origin\'\”错误？

Question

我有一个 VueJS(+quasar) 前端，它使用我自己开发的两个后端。

后端不在同一个域中。

后端的域是：

• https://user-backend.net（管理用户和应用权限）
• https://data-backend.net（包含我所有的业务数据）

前端的域是：

• https://myapp.net

我使用 Axios 作为 API 阅读器，两个后端都提供了 api 的端点。

所以当我处于开发模式（具有不同端口的本地主机）时我遇到了 AXIOS cors 问题所以为了解决这个问题我在没有网络安全的情况下运行我的浏览器，因为它只是开发。

但是，今天我将应用程序投入生产，我又遇到了这个错误。

因此，我在 Internet 上寻找了多种解决方案，每次都向我提供了相同的变通步骤。

所以我关注了其中一个，这是我的内容： axios.js

export default boot(async ({ app }) => {
  axios.defaults.headers.common["Access-Control-Allow-Origin"] =
    "*";
});

但是现在，对于开发环境，我认为这不是问题，但是现在我在生产环境中，我该如何解决这个问题？

我真的很烦这些 CORS POLICY，我想用最优化的生产方式来解决这个问题。

这是控制台日志错误：

Access to XMLHttpRequest at 'https://user-backend.net/tokens' from origin 'https://myapp.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

这是CORS错误，不是SOP，所以跟前端无关，后台必须设置Access-Control-Allow-Origin : * // or your domain for more security