CORS error and secret keys in network tab-CodePudding

I'm working on Vue Storefront project(Nuxt.js front-end, Express.js back-end).

I send information from my front-end which I then receive in the Express.js server. The path the information follows is a Home.vue file --> a Nuxt Plugin.js file --> and the a middleware file which is on the Express.js side of the app. (all these files are inside one and the same project).
The middleware will do a POST-request to an external API using Axios. The information will then return to the front-end for the user to be seen.

The problem is that I have an CORS issue, which will most likely be caused because the API does not accept my domain and thus throws the CORS-error at the OPTIONS-request, never sending the POST after that. 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. But still I get the CORS-error. On top of that, all the Secret keys can be seen in the network tab, which I think is weird because I have hosted my app on my server, and in `nuxt.config.js I've set the following settings:

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

The these keys come from Environment Variables on the server, not from a hosted .env file.

How can I hide these Secret keys, and possibly fix the CORS error?

CORS error: Access to XMLHttpRequest at 'API.com' from origin 'MyhostedApp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS error with CORS-browser extension: Access to XMLHttpRequest at 'API.com' from origin 'MyhostedApp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Axios request in my Middleware:

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);
  }
}

Browsers request:

**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

CodePudding user response：

CORS is totally unrelated to your Nuxt configuration, more details are available here.
TDLR: fix those on your backend (several answers are available in the given link above).

Nuxt is a Vue app on steroids with some SSR or SSG. It is not supposed to replace an Express server or alike. Also, one important thing to understand is that env variables are available but private ones will only be available on the server (like the initial render or when building/generating the app). The values of target and ssr are totally irrelevant here because it's a backend configuration issue anyway.

After the initial render, your Nuxt app will behave mostly like a Vue app and all the subsequent navigations will be client-side. Hence, all the HTTP calls will be publicly available (this is how a frontend app works).

If you want to hide some stuff (no real need usually), you could make some calls to a backend who will pass the sensitive tokens and so to the real backend, somewhat like a middleware backend.

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

This is exactly the same, there is no difference between both because they are basically the same thing.

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.

The target: 'server' doesn't change anything here, since it's related to how page generation is made, it's not a "could you make all of the call on the server please?", as explained here.

Also, if you have the Nuxt app and the API in the same place, you still need to enable the CORS there since you will loopback on the same host.

If you have your API at yolo.com, and the Nuxt app is also located a yolo.com, you still need to tell to your Express app that you need to allow any calls coming from yolo.com to your API endpoint.