when developing an application in vuejs. I need to show some charts on the UI, for this when requesting my backend for the data, but the request is getting blocked due to CORS policy. when using axios to make the request to backend. Here is my chart component which is making the call
<template>
<div class=”filed-against-chart” ref=”chartdiv” id=”filedAgainstChart”>
</div>
</template>
<script>
import axios from ‘axios’;
import * as am4core from “@amcharts/amcharts4/core”;
import * as am4charts from “@amcharts/amcharts4/charts”;
import am4themes_animated from “@amcharts/amcharts4/themes/animated”;
am4core.useTheme(am4themes_animated);
export default {
name: ‘FiledAgainstChart’,
mounted() {
const config = {headers: {‘Access-Control-Allow-Origin’: ‘*‘};
axios
.get(‘http://localhost:3000/ticket/filedagainst', config)
.then(response => this.chart.data = response);
let chart = am4core.create(‘filedAgainstChart’, am4charts.PieChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart.data = [];
chart.radius = am4core.percent(70);
chart.innerRadius = am4core.percent(40);
chart.startAngle = 180;
chart.endAngle = 360;
let series = chart.series.push(new am4charts.PieSeries());
series.dataFields.value = “value”;
series.dataFields.category = “key”;
series.slices.template.cornerRadius = 10;
series.slices.template.innerCornerRadius = 7;
series.slices.template.draggable = true;
series.slices.template.inert = true;
series.alignLabels = false;
series.hiddenState.properties.startAngle = 90;
series.hiddenState.properties.endAngle = 90;
chart.legend = new am4charts.Legend();
}
}
</script>
<style scoped>
.filed-against-chart {
width: 100%;
height: 400px;
}
</style>
there is enabled the CORS middleware in backend.
My app.js file
const createError = require(‘http-errors’);
const express = require(‘express’);
const path = require(‘path’);
const cookieParser = require(‘cookie-parser’);
const logger = require(‘morgan’);
const cors = require(‘cors’);
const ticketRouter = require(‘./routes/ticket’);
const app = express();
// view engine setup
app.set(‘views’, path.join(__dirname, ‘views’));
app.set(‘view engine’, ‘pug’);
app.use(cors());
app.use(logger(‘dev’));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, ‘public’)));
app.use(‘/ticket’, ticketRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get(‘env’) === ‘development’ ? err : {};
// render the error page
res.status(err.status || 500);
res.render(‘error’);
});
module.exports = app;
My router file
Here is my router
const express = require(‘express’);
const router = express.Router();
const ticketTable = require(‘../controllers/ticketTable’);
const cors = require(‘cors’);
router.get(‘/‘, async function (req, res, next) {
const data = await ticketTable.getAllData();
res.send(JSON.stringify(data));
});
router.get(‘/filedagainst’, cors({origin: ‘http://localhost:3000/ticket/filedagainst'}), async function (req, res, next) {
const data = await ticketTable.getFiledAgainstChartData();
res.send(JSON.stringify(data));
});
module.exports = router;
Solution :
You configured the cors module like this:
app.use(cors());
but that only allows for simple requests.
See the documentation for how to support preflighted requests.
Note, that you wouldn’t be making a preflighted request if it wasn’t for this:
const config = {headers: {‘Access-Control-Allow-Origin’: ‘*‘};
custom request headers require a preflight. Of course, Access-Control-Allow-Origin is a response header so it shouldn’t be on the request in the first place. Remove that.
Solution 2:
I searched in Github, there is exists a solution with setting crossdomain in axios
const config = {headers: {‘Access-Control-Allow-Origin’: ‘*‘}; need to replace with { crossdomain: true }
Here is a link to the answer: https://github.com/axios/axios/issues/853#issuecomment-322954804