Проблема с CORS Access-Control-Allow-Origin при использовании Vue.js на стороне клиента и Express на стороне сервера

Я пытаюсь вызвать свой API в Jazz с помощью Vue.js и Axios, но получаю следующую ошибку:

Доступ к XMLHttpRequest в 'https://jazz.api.com/api/extra_stuff _here' from origin 'http://localhost' заблокирован политикой CORS: ответ на предполетный запрос не проходит проверку контроля доступа: На запрошенном ресурсе отсутствует заголовок Access-Control-Allow-Origin.

Я искал другие решения, такие как https://enable-cors.org/server_expressjs.html или добавление

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

к моему коду, и он все еще не работал. Даже если я использую подстановочный знак для Access-Control-Allow-Origin, я все равно получаю проблему CORS и не могу вызвать свой API. Я использую Vue и Typescript на стороне клиента, и мне удалось заставить Express работать на моей стороне сервера. Вот фрагмент кода моего вызова API Axios:

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

Здесь я вызываю свой API в этом файле TypeScript, а вот мой 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");
});

Независимо от того, что я делаю, я не могу понять эту проблему CORS. Прежде чем я добавил экспресс в свое приложение, у меня все еще была та же проблема, я думал, что, возможно, экспресс на стороне сервера решит проблему CORS. Однако это не помогло. Раньше я запускал свое приложение Vue, выполняя npm run serve. Но любая помощь была бы замечательной! Может быть, это проблема с Jazz?


javascript cors vue.js express ibm-jazz
person Highlight    schedule 21.12.2018    source источник
comment
stackoverflow.com/a/38500226/5188835 - попробуйте это решение.   -  person Cheezy Code    schedule 21.12.2018
comment
@CheezyCode просто попробовал, но все равно не повезло .. Проблема с CORS все еще возникает ..   -  person Highlight    schedule 21.12.2018
comment
Удалите заголовки Access-Control- * из клиентского кода, которым они там не принадлежат, и не изменят способ обработки сервером cors.   -  person Patrick Evans    schedule 21.12.2018
comment
Также у вас нет маршрута post (), определенного в вашем экспресс-коде, только use () и get ()   -  person Patrick Evans    schedule 21.12.2018
comment
@PatrickEvans Хорошо, я удалил это! Конечно, у меня все еще возникают те же проблемы - есть идеи, как это исправить?   -  person Highlight    schedule 21.12.2018
comment
Мне нужен пост ()?   -  person Highlight    schedule 21.12.2018
comment
Не уверен. Проверьте актуальный запрос на вкладке сети в инструментах разработчика. Посмотрите, действительно ли он получает то, что должен, и не пытается ли он добавить один   -  person Patrick Evans    schedule 21.12.2018
comment
@PatrickEvans Итак, я взглянул на вкладку сети и оказалось, что ни один из установленных мной заголовков не читается? Я не уверен, что это значит   -  person Highlight    schedule 27.12.2018

Ответы (2)


arrow_upward
3
arrow_downward

Вы добавили промежуточное ПО cors, но не включили его для запросов OPTIONS

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

Попробуйте добавить что-то подобное на свой сервер, чтобы включить его. Вы можете прочитать дополнительную информацию в экспресс-документации здесь https://expressjs.com/en/resources/middleware/cors.html

person digitil    schedule 21.12.2018
comment
Я не знал, что мне нужно это сделать. Я просто попробовал, но безуспешно. У меня все еще та же проблема CORS. Мне теперь интересно, имеет ли это какое-то отношение к джазу? - person Highlight; 21.12.2018

arrow_upward
2
arrow_downward

Обновление: мне не удалось исправить проблему CORS с Axios, но мне удалось найти обходной путь для этого. Вместо библиотеки Axios я использую fetch для вызова API. Поскольку все, что мне нужно сделать с моим вызовом запроса, - это передать параметры и получить обратно данные на основе параметров, мое приложение работает с fetch. Во время исследования я обнаружил, что могут быть проблемы или ограничения при использовании fetch? Но у меня это работает, поэтому я буду придерживаться этого решения. Вот мой код для справки:

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))
person Highlight    schedule 29.12.2018
comment
Как можно получить возможную работу, когда Axios этого не делает? Разве они не делают то же самое под капотом? - person CoredusK; 28.10.2019