title: "Access-Control-Allow-Origin" CORS issue when using Vue.js for client side and Express for server side
body: <p>I'm trying to make a call to my API on Jazz using Vue.js and Axios, but I am getting the following error:</p>
  
  <blockquote>
    <p>Access to XMLHttpRequest at '<a href="https://jazz.api.com/api/extra_stuff" rel="nofollow noreferrer">https://jazz.api.com/api/extra_stuff</a>
    _here' from origin '<a href="http://localhost" rel="nofollow noreferrer">http://localhost</a>' 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>
  </blockquote>
  
  <p>I've been looking at other solutions like <a href="https://enable-cors.org/server_expressjs.html" rel="nofollow noreferrer">https://enable-cors.org/server_expressjs.html</a> or adding </p>
  
  <pre><code>"Content-Type": "application/json",
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type, Authorization",
  "Access-Control-Allow-Credentials": "true"
  </code></pre>
  
  <p>to my code and it still didn't work. Even if I do the wildcard for the Access-Control-Allow-Origin, I still get the CORS issue and cannot call my API. I am using Vue and Typescript for the client side and managed to get Express working for my server side. Here is a code snippet of my Axios API call:</p>
  
  <pre><code>return Axios.post('https://jazz.api.com/api/extra_stuff_here', context.getters.getRequest,
          {
            headers: {
              "Content-Type": "application/json",
              "Access-Control-Allow-Origin": "*",
              "Access-Control-Allow-Methods": "OPTIONS",
              "Access-Control-Allow-Headers": "Content-Type, Authorization",
              "Access-Control-Allow-Credentials": "true"
            }
          }
        )
  </code></pre>
  
  <p>This is where I am calling my API in this TypeScript file and here is my server.js:</p>
  
  <pre><code>var express = require('express');
  var path = require('path');
  var cors = require('cors');
  var bodyParser = require('body-parser');
  var morgan = require('morgan');
  
  var app = express();
  app.use(morgan('dev'));
  app.use(cors());
  app.use(bodyParser.json());
  
  var publicRoot = './dist';
  
  //app.use(express.static(path.join(__dirname, '/dist')));
  app.use(express.static(publicRoot));
  
  app.get('/', function (req, res) {
      res.sendFile("index.html", { root: publicRoot });
  });
  
  app.use(function(req, res, next) { 
      res.header("Access-Control-Allow-Origin", "*");
      res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Authorization");
      res.header("Content-Type", "application/json");
      res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
      res.header("Access-Control-Allow-Credentials", "true");
      next();
  }); 
  
  app.listen(process.env.PORT || 80, function() {
      console.log("listening on port 80");
  });
  </code></pre>
  
  <p>No matter what I seem to do, I cannot figure out this CORS issue. Before I added express to my application, I still got the same issue, thinking that maybe express on the server side would fix the CORS issue. However it didn't help. Beforehand, I was running my Vue application by doing npm run serve. But any help would be great! Could it possibility be an issue with Jazz?</p>