title: CORS error and secret keys in network tab
body: <p>I'm working on Vue Storefront project(<code>Nuxt.js</code> front-end, <code>Express.js</code> back-end).</p>
  <p>I send information from my front-end which I then receive in the Express.js server. The path the information follows is a <code>Home.vue</code> file --&gt; a Nuxt <code>Plugin.js</code> file --&gt; and the a middleware file which is on the <code>Express.js</code> side of the app. (all these files are inside one and the same project).<br />
  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.</p>
  <p>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 <code>nuxt.config.js</code>, 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:</p>
  <pre class="lang-js prettyprint-override"><code>export default () =&gt; {
    const baseConfig = {
      ssr: true, // default value is true
      target: 'server', // default is 'server'
  ...
  </code></pre>
  <p>The these keys come from Environment Variables on the server, not from a hosted <code>.env</code> file.</p>
  <p>How can I hide these Secret keys, and possibly fix the CORS error?</p>
  <p><strong>CORS error:</strong>
  Access to XMLHttpRequest at <code>'API.com'</code> from origin <code>'MyhostedApp.com'</code> 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.</p>
  <p><strong>CORS error with CORS-browser extension:</strong>
  Access to XMLHttpRequest at <code>'API.com'</code> from origin <code>'MyhostedApp.com'</code> has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.</p>
  <p><strong>Axios request in my Middleware:</strong></p>
  <pre class="lang-js prettyprint-override"><code>var authBodyFormData = new FormData();
  authBodyFormData.append(&quot;required_Data&quot;, process.env.SAMPLE_ENV_VAR);
  async function getAuthtoken() { 
    try {
      const res = await axios({
        method: &quot;post&quot;,
        headers: {
          'Access-Control-Allow-Origin': '*',
          &quot;Content-Type&quot;: &quot;application/x-www-form-urlencoded&quot; 
        },
        url: process.env.AUTH_URL,
        data: authBodyFormData,
      });
      return response?.data ?? undefined;
    } catch (e) {
      console.warn(e);
    }
  }
  </code></pre>
  <p><strong>Browsers request:</strong></p>
  <pre><code>**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: &quot; Not A;Brand&quot;;v=&quot;99&quot;, &quot;Chromium&quot;;v=&quot;101&quot;, &quot;Google Chrome&quot;;v=&quot;101&quot;
  sec-ch-ua-mobile: ?0
  sec-ch-ua-platform: &quot;Windows&quot;
  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
  </code></pre>