Верблюд: доступ к XMLHttpRequest на <url>из источника <url>был заблокирован политикой CORS

Question

Я пытаюсь отправить сообщение из моего приложения реагирования на верблюжий маршрут, который, в свою очередь, перенаправит запрос в jira или получит данные из sqlite, но в то время как я делаю это из реакции / оси, я получаю эту проблему CORS.

почтовый запрос axios выглядит следующим образом:

axios.defaults.headers.common['Authorization'] = "Basic <token>;
axios.defaults.headers.common['Content-Type'] = "application/json";
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
axios.defaults.headers.common['Access-Control-Allow-Methods'] = 'GET, POST, 
PUT, DELETE, OPTIONS';
axios.post("http://localhost:8383/jirasql/123").then(function (response) {
  console.log("flag###"+response);
})
.catch(function (error) {
  console.log(error);
});

Конфигурация верблюжьего маршрута имеет:

    restConfiguration()
    .component("restlet")
    .host("localhost").port("8383")
    .enableCORS(true) // <-- Important
    .corsAllowCredentials(true) // <-- Important
    .corsHeaderProperty("Access-Control-Allow-Origin","*")
    .corsHeaderProperty("Access-Control-Allow-Headers","Origin, Accept, X- 
    Requested-With, Content-Type, Access-Control-Request-Method, Access- 
    Control-Request-Headers, Authorization")
   .bindingMode(RestBindingMode.auto);
    rest().path("/api").consumes("application/json")
    .get()
        .to("bean:helloBean")
    .post().type(PostRequestType.class)
        .to("bean:postBean");

и конкретный верблюжий маршрут для получения данных sqlite в ответ

from("rest:post:jirasql/{id}?enableCORS=true")
    .setHeader("Access-Control-Allow-Origin", constant("*"))        
    .setHeader("Access-Control-Allow-Headers", constant("X-Auth-Token, Content-Type"))        
    .setHeader("Access-Control-Allow-Methods", constant("POST, OPTIONS, PUT"))
    .setBody(constant("select * from eventlog;"))
    .to("jdbc:dataSource")
    .setHeader("Access-Control-Allow-Origin", constant("*"))        
    .setHeader("Access-Control-Allow-Headers", constant("X-Auth-Token, Content-Type"))        
    .setHeader("Access-Control-Allow-Methods", constant("POST, OPTIONS, PUT"))
    .log("sql test");

Примечание: я пробовал различные заголовки и способы, это только один из них, на котором я был

Answer 1

Исправлено путем установки одинаковых значений для Access-Control-Allow-Headers и Access-Control-Request-Headers на Camel и ReactJ.

ReactJs

headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Request-Headers': 'access-control-allow-methods,access-control-allow-origin,authorization,content-type',
'Access-Control-Allow-Headers': 'access-control-allow-methods,access-control-allow-origin,authorization,content-type',
'Access-Control-Allow-Methods': 'GET, DELETE, POST, OPTIONS, PUT',
}

Camel:

.setHeader("Access-Control-Allow-Origin", constant("*"))        
.setHeader("Access-Control-Allow-Headers", constant("access-control-allow-methods,access-control-allow-origin,authorization,content-type"))        
.setHeader("Access-Control-Allow-Methods", constant("GET, DELETE, POST, OPTIONS, PUT"))

Answer 2

Попробуйте установить Google Chrome CORS Plugin и повторите запрос.