Search code examples
html-framework-7luceefw1

Fw/1(Lucee) - Ajax request failed by CORS policy in Framework7

I have got the following ajax request in Framework7 in order to get back json data in FW/1 (4.2) (Lucee 5.2.9), but unfortunately i get error due to CORS policy via Chrome browser.

app.request({
  url:"http://127.0.0.1:49820/index.cfm/user/login/",
  type:"POST",
  data:JSON.stringify({
    "username":username,
    "password":password
  }),
  crossDomain: true,
  xhrFields: { withCredentials: false },
  headers: {
   'Access-Control-Allow-Origin': '*',
   'Access-Control-Allow-Methods':'GET,HEAD,OPTIONS,POST,PUT',
   'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, Authorization',
   'Content-type': 'text/javascript; charset=utf-8',
  },
  dataType:"jsonp",
  success:function(result){
      console.log(result);
  }

 });

In my Fw/1 Application.cfc, i have got the following settings:

variables.framework =   {
      preflightOptions = true,
      generateSES = true,
      routes= [
        { "$POST/user/login/" = "/main/get" }
        ] 
    };

and in my main Controller get action i get json via

rc.user_info = variables.userService.login(rc.dsn,rc.username,rc.password);
variables.fw.renderData( "json", rc.user_info);

Unfortunately i receive the following message

Access to XMLHttpRequest at 'http://127.0.0.1:49820/index.cfm/user/login/' from origin 'http://localhost' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

Regarding request-header information, i receive the following and as far as i can see parameters are also passed:

enter image description here

Any idea that could help me?

Regards

Solution

  • What version of FW/1 are you using? I assume the latest?

    I know nothing about how Framework7's ajax features work, but I would try setting preflightOptions = true, if you haven't already, in your FW/1 framework settings in Application.cfc and see if that remedies your issue.

    Check out the OPTIONS Support section of http://framework-one.github.io/documentation/4.3/developing-applications/#options-support

    UPDATE

    Since preFlightOptions is being used...

    My next suggestion is to set your allowed headers in the FW/1's framework settings. You can do this by defining optionsAccessControl.headers = "your, headers, here". This is all mentioned in the link I already shared.

    You can define the optionsAccessControl struct as a whole if you'd like and set the other keys as well.

    optionsAccessControl = {
  origin: "",
  headers: "",
  credentials: true/false,
  maxAge: 12345
}

    UPDATE 2

    This same issue was cross-posted to the FW/1 GitHub Repository so for transparency, I wanted to share the solution here for anyone who may come across this...

    In Application.cfc, include the following framework settings:

    generateSES = true,
SESOmitIndex = true,
preflightOptions = true,
optionsAccessControl = {
    origin: "*",
    headers: "Origin, X-Requested-With, Content-Type, Accept, Authorization, Access-Control-Allow-Headers, Access-Control-Allow-Methods, Access-Control-Allow-Origin"
}

    In the controller method pass the origin header with the response:

    variables.fw.renderData( "json", rc.user_info).header( "Access-Control-Allow-Origin", "*" );

    Note: For security reasons, it's best practice to not allow "*" and instead only allow the domain that is calling/responding. (Example: http://127.0.0.1:12345)