CODEWITHSUNDEEP
apache-camelaxios
Sid
Sid

Reputation: 81

Camel: Access to XMLHttpRequest at <url> from origin <url> has been blocked by CORS policy

I am trying to send a post from my react app to a camel route which in turn would forward the request to jira, or get data from sqlite, but while i am doing so from react/axios i am getting that CORS issue.

axios post request looks like this:

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

Camel route config has this:

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

and specific camel route to get sqlite data as response

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

Note: i tried various headers and ways this is just one of them that i was onto

Upvotes: 1

Views: 639

Answers (2)

user2192227
user2192227

Reputation:

Fixed by setting the same value for Access-Control-Allow-Headers and Access-Control-Request-Headers on Camel and ReactJs.

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

Upvotes: 1

kreysix
kreysix

Reputation: 359

Try installing the Google Chrome CORS Plugin and then requesting again.

Upvotes: 1

Related Questions