从前端到后端的CORS策略阻止请求

Question

I am developing an application in vuejs. I need to show some charts on the UI, for this I am requesting my backend for the data, but the request is getting blocked due to CORS policy. I am 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> 

I have 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; 

Answer 1

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.

Answer 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