CORS 和 SSR 以及 express、react 和 Axios答案

【问题标题】：CORS with SSR with express, react and AxiosCORS 和 SSR 以及 express、react 和 Axios
【发布时间】：2021-01-26 19:16:45
【问题描述】：

我正在开发一个 APP（由 express 提供的 React：SSR），它必须与公共 API 连接，并且我从 chrome 收到下一条消息：

从源“http://localhost:3000”访问“https://api.musixmatch.com/ws/1.1/track.search?q_track=There%20will%20be%20blood&apikey=value”的 XMLHttpRequest被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

所以我在我的客户端中使用下一个配置/标题设置 axios：

const instance = axios.create({
  baseURL: urlServer,
});

const options = {
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Content-Type": "application/json",
  },
  params: {
    apikey: "value",
  },
};

export const getUsers = () =>
  instance.get(`track.search?q_track=There will be blood`, options);

我也试过把它放在 webpack 上：

devServer: {
    historyApiFallback: true,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers":
        "Origin, X-Requested-With, Content-Type, Accept",
    },
  },

这是我的 server.js

import express from "express";
import cors from "cors";
import dotenv from "dotenv";
import webpack from "webpack";
import helmet from "helmet";
import React from "react";
import { renderToString } from "react-dom/server";
import { renderRoutes } from "react-router-config";
import { StaticRouter } from "react-router-dom";
import { Layout } from "components";
import serverRoutes from "../frontend/routes/serverRoutes";
import getManifest from "./getManifest";

dotenv.config();

const { ENV, PORT_DEV, PORT_PRO } = process.env;
const port = ENV === "development" ? PORT_DEV : PORT_PRO;

const app = express();
app.use(cors());

if (ENV === "development") {
  console.log("#########################################");
  console.log("Enviroment: ", "Working on develop");

  const webpackConfig = require("../../webpack.config");
  const webpackDevMiddleware = require("webpack-dev-middleware");
  const webpackHotMiddleware = require("webpack-hot-middleware");
  const compiler = webpack(webpackConfig);

  const webpackServerConfig = {
    port: port,
    hot: true,
  };

  app.use(webpackDevMiddleware(compiler, webpackServerConfig));
  app.use(webpackHotMiddleware(compiler));
}

if (ENV === "production") {
  app.use((request, response, next) => {
    if (!request.hashManifest) {
      request.hashManifest = getManifest();
    }
    next();
  });
  app.use(express.static(`${__dirname}/public`));
  app.use(helmet());
  app.use(helmet.permittedCrossDomainPolicies());
  app.disable("x-powered-by");
}

const setResponse = (html, manifest) => {
  const mainStyles = manifest ? manifest["main.css"] : "assets/main.css";
  const mainBuild = manifest ? manifest["main.js"] : "assets/main.js";
  const vendorBuild = manifest ? manifest["vendors.js"] : "assets/vendor.js";

  return `
      <!DOCTYPE html>
      <html lang="es">
        <head>
          <meta charset="utf-8" />
          <link href="${mainStyles}" rel="stylesheet" type="text/css">
          <title>React App</title>
        </head>
        <body>
          <div id="root">${html}</div>
          <script src="${mainBuild}" type="text/javascript"></script>
          <script src="${vendorBuild}" type="text/javascript"></script>
        </body>
      </html>
    `;
};

const renderApp = (request, response) => {
  const html = renderToString(
    <Layout>
      <StaticRouter location={request.url} context={{}}>
        {renderRoutes(serverRoutes)}
      </StaticRouter>
    </Layout>
  );

  response.send(setResponse(html, request.hashManifest));
};

app.get("*", renderApp);

app.listen(port, (error) => {
  if (error) {
    console.log("Error: ", "can not run the server.");
  } else {
    console.log(`Server running on port ${port} - ${ENV}`);
    console.log("#########################################");
  }
});

我尝试使用邮递员获取数据并且它有效。但如果我从我的 APP 尝试，它没有。

我需要在 express 文件 (server.js) 上设置请求吗？
我是否在客户的请求中遗漏了某些内容？
我可以在客户端做请求吗？

关于一般标题的更多信息。它给了我这对键值：

推荐人政策：strict-origin-when-cross-origin

【问题讨论】：

您不应该直接从客户端应用程序发出该请求，然后您必须与您的用户共享您的令牌。 CORS 是通过的，但请注意，您无法通过在客户端中添加标头来修复它（它们是需要由服务器设置的响应标头）。您应该编写某种后端（Express 或其他）来代理该请求，这样您就可以将令牌保密。
感谢您的推荐。我试试看
嗨，你试过安装cors吗？ expressjs.com/en/resources/middleware/cors.html
是的，我正在使用 cors。也许可能是 CORS 和 Helmet 之间的问题或冲突？

标签： reactjs api express axios cors

【解决方案1】：

正如@lissettdm 建议的那样，我使用的是 cors 但没有正确的配置。

我仔细阅读了http://expressjs.com/en/resources/middleware/cors.html 的文档，发现我们可以设置我们信任的来源。

所以我做到了：

app.use(
  cors({
    origin: ["https://api.musixmatch.com"],
  })
);

这会将域添加到信任，它会让我们从客户端发出请求。就我而言，我不想隐藏 apikey，因为在同一个请求中我必须发送它，但正如 @jonrsharpe 建议的那样，我们不能显示该信息。

【讨论】：