"Access-Control-Allow-Origin" CORS issue when using Vue.js for client side and Express for server side

Question

I'm trying to make a call to my API on Jazz using Vue.js and Axios, but I am getting the following error:

Access to XMLHttpRequest at 'https://jazz.api.com/api/extra_stuff _here' from origin 'http://localhost' 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.

I've been looking at other solutions like https://enable-cors.org/server_expressjs.html or adding

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

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:

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

This is where I am calling my API in this TypeScript file and here is my server.js:

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

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?

@CheezyCode just tried and still no luck.. Still getting the CORS issue.. — Highlight
– Highlight, Commented Dec 21, 2018 at 0:33
Remove the Access-Control-* headers from the client code they dont belong there and wont change how the server will handle cors — Patrick Evans
– Patrick Evans, Commented Dec 21, 2018 at 0:52
Also you dont have a post() route defined in your express code, just a use() and a get() — Patrick Evans
– Patrick Evans, Commented Dec 21, 2018 at 0:55
@PatrickEvans Okay, I removed it! Of course I still get the same issues - any ideas how to fix it? — Highlight
– Highlight, Commented Dec 21, 2018 at 0:56

digitil · Accepted Answer · 2018-12-21 00:33:40Z

3

You’ve added the cors middleware but haven’t enabled it for OPTIONS requests

app.options('*', cors())

Try adding something like this to your server to enable it. You can read further in the express docs here https://expressjs.com/en/resources/middleware/cors.html

answered Dec 21, 2018 at 0:33

digitil

9195 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Highlight Over a year ago

I didn't know that I had to do that. I just tried it, but no luck. I still get the same CORS issue. I'm now wondering if it has something to do with Jazz?

Highlight · Accepted Answer · 2018-12-29 01:09:06Z

2

Update: I didn't manage to fix the CORS issue with Axios, but I did manage to find a workaround for this. Instead of using the Axios library, I am using fetch to call the API. Since all I need to do with my request call is to pass in parameters and get back data based on the parameters, my application works with fetch. While I was doing my research, I saw that there may be issues or limitations using fetch? But hey, it works for me so I'll be sticking with this solution. Here is my code as reference for anyone:

return fetch('https://dev.jazz.com/api/stuff_goes_here', {
  method: 'post',
  body: JSON.stringify(<request object goes here>)
}).then((res) => res.json())
.then((data) => {
  return data;
}).catch((err)=>console.log(err))

answered Dec 29, 2018 at 1:09

Highlight

511 gold badge2 silver badges8 bronze badges

1 Comment

CoredusK Over a year ago

How can fetch possible work when Axios doesn't? Don't they do the same thing under the hood?

Collectives™ on Stack Overflow

"Access-Control-Allow-Origin" CORS issue when using Vue.js for client side and Express for server side

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related