Запрос политики CORS от внешнего интерфейса к внутреннему

Question

Я занимаюсь разработкой приложения в vuejs. Мне нужно показать некоторые диаграммы в пользовательском интерфейсе, для этого я запрашиваю свой бэкэнд для данных, но запрос блокируется из-за политики CORS. Я использую axios, чтобы сделать запрос к бэкэнду. Вот мой компонент графика, который делает вызов

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

Я включил промежуточное программное обеспечение CORS в бэкэнде. Мой файл app.js

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

Вот мой роутер

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

Вы настроили модуль cors следующим образом:

app.use(cors());

… но это позволяет только простые запросы.

См. документацию о том, как поддерживать предварительно просвечиваемые запросы .

Обратите внимание, что вы не сделали бы предварительно просвеченный запрос, если бы не было этого:

const config = {headers: {'Access-Control-Allow-Origin': '*'}};

… заголовки пользовательских запросов требуют предварительной проверки.Конечно, Access-Control-Allow-Origin - это заголовок response , поэтому его не должно быть по запросу.Удалить это.

Answer 2

Я искал в Github, существует решение с настройкой кроссдомена в axios const config = {headers: {'Access-Control-Allow-Origin': '*'}}; необходимо заменить на { crossdomain: true }

Вот ссылка на ответ: https://github.com/axios/axios/issues/853#issuecomment-322954804