我正在进行Vue Storefront项目(Nuxt.js前端，Express.js后端)。
我从前端发送信息，然后在Express.js服务器中接收信息。信息遵循的路径是CCD_ 3文件-->NuxtPlugin.js文件-->以及位于应用程序的CCD_ 5侧的中间件文件。(所有这些文件都在同一个项目中)
中间件将使用Axios对外部API进行POST请求。然后，信息将返回到前端以供用户查看。
问题是我有一个CORS问题，这很可能是因为API不接受我的域，因此在OPTIONS-request中抛出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错误：CORS策略已阻止从原始'MyhostedApp.com'访问'API.com'上的XMLHttpRequest：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在"Access control Allow origin"标头。
CORS浏览器扩展出现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
CORS与您的Nuxt配置完全无关，更多详细信息可在此处获取
TDLR：修复后端上的问题(上面给出的链接中有几个答案)。
Nuxt是一个Vue应用程序上的类固醇与一些SSR或SSG。它不应该取代Express服务器或类似的服务器。此外，需要理解的一件重要事情是，env变量是可用的，但私有变量仅在服务器上可用(如初始渲染或构建/生成应用程序时)。target和ssr的值在这里完全无关，因为这无论如何都是后端配置问题。
在初始渲染之后，Nuxt应用程序的行为将主要像Vue应用程序，并且所有后续导航都将是客户端导航。因此，所有的HTTP调用都将是公开的(这就是前端应用程序的工作方式)。
如果你想隐藏一些东西(通常没有真正的需要)，你可以对后端进行一些调用，后端会将敏感令牌传递给真正的后端，有点像中间件后端。
这些键来自服务器上的Enviorment Variables，而不是托管的.ENV文件。
这完全一样，两者之间没有区别，因为它们基本上是一样的。
问题是我在nuxt.config.js中启用了服务器端渲染，我的应用程序和API在同一台服务器上。
target: 'server'在这里没有任何更改，因为它与页面生成的方式有关，所以它不是一个"；你能在服务器上打所有的电话吗&"；，如这里所解释的。
此外，如果你在同一个地方有Nuxt应用程序和API，你仍然需要在那里启用CORS，因为你将在同一台主机上进行环回。
如果您的API位于yolo.com，并且Nuxt应用程序也位于yolo.com，则您仍然需要告诉Express应用程序，您需要允许从yolo.com到API端点的任何调用。