网络选项卡中的 CORS 错误和密钥

Question

我正在处理 Vue Storefront 项目（Nuxt.js front-end，Express.js back-end）。

我从我的 front-end 发送信息，然后我在 Express.js 服务器接收到这些信息。信息遵循的路径是 Home.vue 文件 --> Nuxt Plugin.js 文件 --> 和应用程序 Express.js 端的中间件文件。（所有这些文件都在同一个项目中）。
中间件将使用 Axios 对外部 API 执行 POST-request。然后信息将 return 发送到 front-end 以供用户查看。

问题是我有一个 CORS 问题，这很可能是因为 API 不接受我的域，因此在 OPTIONS-request 处抛出 CORS-error，之后永远不会发送 POST 。问题是我在 nuxt.config.js 中启用了服务器端渲染，我的应用程序和 API 在同一台服务器上。但我仍然得到 CORS-error。最重要的是，所有密钥都可以在网络选项卡中看到，我认为这很奇怪，因为我在我的服务器上托管了我的应用程序，并且在 `nuxt.config.js 中我设置了以下设置：

export default () => {
  const baseConfig = {
    ssr: true, // default value is true
    target: 'server', // default is 'server'
...

这些密钥来自服务器上的环境变量，而不是来自托管的 .env 文件。

如何隐藏这些密钥，并可能修复 CORS 错误？

CORS 错误： CORS 策略已阻止从来源 'MyhostedApp.com' 访问位于 'API.com' 的 XMLHttpRequest：对预检请求的响应未通过访问控制检查：'Access-Control-Allow-Origin' header 不存在于请求的资源。

带有 CORS-browser 扩展名的 CORS 错误： CORS 策略已阻止从来源 'MyhostedApp.com' 访问位于 'API.com' 的 XMLHttpRequest：对预检请求的响应未通过访问控制检查：它没有 HTTP 正常状态。

我的中间件中的axios请求：

var authBodyFormData = new FormData();
authBodyFormData.append("required_Data", process.env.SAMPLE_ENV_VAR);
async function getAuthtoken() { 
  try {
    const res = await axios({
      method: "post",
      headers: {
        'Access-Control-Allow-Origin': '*',
        "Content-Type": "application/x-www-form-urlencoded" 
      },
      url: process.env.AUTH_URL,
      data: authBodyFormData,
    });
    return response?.data ?? undefined;
  } catch (e) {
    console.warn(e);
  }
}

浏览器请求：

**General:**
Request URL: API.com
Referrer Policy: strict-origin-when-cross-origin

**Request Headers:**
Provisional headers are shown Learn more
Accept: application/json, text/plain, */*
Access-Control-Allow-Origin: *
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary8fuAlA3VfBtdUPym
Referer: MyhostedApp.com
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="101", "Google Chrome";v="101"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36

Answer 1

CORS 与您的 Nuxt 配置完全无关，更多细节在 .
TDLR：在您的后端修复这些问题（上面给定的 link 中提供了几个答案）。

Nuxt 是一款 Vue 应用程序，带有一些 SSR 或 SSG。它不应该取代 Express 服务器或类似的东西。此外，需要了解的一件重要事情是环境变量可用，但私有变量仅在服务器上可用（如初始渲染或 building/generating 应用程序时）。 target 和 ssr 的值在这里完全不相关，因为无论如何这是一个后端配置问题。

初始渲染后，您的 Nuxt 应用程序将主要像 Vue 应用程序一样运行，所有后续导航都将 client-side。因此，所有 HTTP 调用都将公开可用（这就是前端应用程序的工作方式）。

如果你想隐藏一些东西（通常没有真正需要），你可以调用一个后端来传递敏感的令牌，然后再传递给真正的后端，有点像 中间件后端.

The these keys come from Enviorment Variables on the server, not from a hosted .ENV file.

这完全一样，两者没有区别，因为它们基本上是同一个东西。

The thing is that I have Server Side Rendering enabled in the nuxt.config.js, my app and the API are on the same server.

target: 'server' 在这里没有任何改变，因为它与页面生成的方式有关，而不是“请问您可以在服务器上进行所有调用吗？”，因为 explained here.

此外，如果您在同一位置安装了 Nuxt 应用程序和 API，您仍然需要在那里启用 CORS，因为您将在同一主机上环回。

如果您的 API 位于 yolo.com，并且 Nuxt 应用程序也位于 yolo.com，您仍然需要告诉您的 Express 应用程序您需要允许任何从 yolo.com 到您的 API 端点的呼叫。

网络选项卡中的 CORS 错误和密钥

CORS error and secret keys in network tab

express

axios

environment-variables

cors

nuxt.js