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

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

0 голосов
/ 21 декабря 2018

Я пытаюсь вызвать мой 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 работать на моей серверной стороне.Вот фрагмент кода моего вызова Axios API: 

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.Однако это не помогло.Ранее я запускал свое приложение Vue, выполняя команду npm run serve.Но любая помощь будет отличной!Может ли это быть проблемой с джазом?

Ответы [ 2 ]

0 голосов
/ 29 декабря 2018

Обновление: мне не удалось исправить проблему 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))
0 голосов
/ 21 декабря 2018

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

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

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

...