我正在開發 Vue Storefront 專案（Nuxt.js前端、Express.js后端）。
我從前端發送資訊，然后在 Express.js 服務器中接收這些資訊。資訊遵循的路徑是一個Home.vue檔案 --> 一個 Nuxt檔案 --> 和一個位于應用程式一側的Plugin.js中間件檔案。Express.js（所有這些檔案都在同一個專案中）。
中間件將使用 Axios 向外部 API 發出 POST 請求。然后資訊將回傳到前端供用戶查看。
問題是我有一個 CORS 問題，這很可能是因為 API 不接受我的域，因此在 OPTIONS 請求中拋出了 CORS 錯誤，之后再也不發送 POST。問題是我在 中啟用了服務器端渲染nuxt.config.js，我的應用程式和 API 在同一臺服務器上。但我仍然收到 CORS 錯誤。最重要的是，所有的密鑰都可以在網路選項卡中看到，我認為這很奇怪，因為我已經在我的服務器上托管了我的應用程式，并且在 `nuxt.config.js 我已經設定了以下設定：
export default () => {
const baseConfig = {
ssr: true, // default value is true
target: 'server', // default is 'server'
...
這些密鑰來自服務器上的環境變數，而不是托管.env檔案。
如何隱藏這些密鑰，并可能修復 CORS 錯誤？
CORS 錯誤：'API.com'從源
訪問 XMLHttpRequest'MyhostedApp.com'已被 CORS 策略阻止：對預檢請求的回應未通過訪問控制檢查：請求的資源上不存在“Access-Control-Allow-Origin”標頭。
CORS 瀏覽器擴展的 CORS 錯誤：'API.com'從源
訪問 XMLHttpRequest'MyhostedApp.com'已被 CORS 策略阻止：對預檢請求的回應未通過訪問控制檢查：它沒有 HTTP ok 狀態。
我的中間件中的 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
uj5u.com熱心網友回復：
CORS 與您的 Nuxt 配置完全無關，更多詳細資訊可在此處獲得。
TDLR：在您的后端修復這些問題（上面給出的鏈接中提供了幾個答案）。
Nuxt 是一個帶有一些 SSR 或 SSG 的 Vue 應用程式。它不應該取代 Express 服務器或類似服務器。此外，要理解的一件重要事情是環境變數可用，但私有變數僅在服務器上可用（如初始渲染或構建/生成應用程式時）。target和的值在ssr這里完全不相關，因為無論如何它都是后端配置問題。
在初始渲染之后，您的 Nuxt 應用程式的行為將主要類似于 Vue 應用程式，并且所有后續導航都將是客戶端的。因此，所有 HTTP 呼叫都將公開可用（這是前端應用程式的作業方式）。
如果你想隱藏一些東西（通常沒有真正的需要），你可以對后端進行一些呼叫，后端會將敏感令牌傳遞給真正的后端，有點像中間件后端。
這些密鑰來自服務器上的環境變數，而不是來自托管的 .ENV 檔案。
這完全一樣，兩者之間沒有區別，因為它們基本上是相同的東西。
問題是我在 nuxt.config.js 中啟用了服務器端渲染，我的應用程式和 API 在同一臺服務器上。
這里target: 'server'沒有任何改變，因為它與頁面生成方式有關，它不是“你能在服務器上進行所有呼叫嗎？”，如解釋here。
此外，如果你在同一個地方有 Nuxt 應用程式和 API，你仍然需要在那里啟用 CORS，因為你將在同一個主機上環回。
如果您的 API 位于yolo.com，并且 Nuxt 應用程式也位于yolo.com，您仍然需要告訴您的 Express 應用程式您需要允許來自 yolo.com您的 API 端點的任何呼叫。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/481689.html