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

Question

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:

Any idea that could help me?

Regards

Answer 1

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)

Answer 2

The functionality of CORS is to block a browsers request (this is the requesting 'origin') that hasn't explicity been allowed to by the endpoint. In your case the endpoint is at http://127.0.0.1:49820/index.cfm/user/login/. It's impossible to tell the client by pure client code (as you are doing by submitting them in the request headers of your ajax request) to bypass it. This would break CORS functionality and break what CORS has been designed for.

The correct way to implement CORS is to implement them as server response headers at the endpoint at index.cfm/user/login/ of your FW/1 framework, not in the AJAX request. In cfml you usually implement server response headers by setting them with the cfheader tag. Here are some typical examples for allowing the requests. Please verify if the FW1 endpoint is submitting these server http response headers (e.g. by inspecting the response with chrome dev tools).

Let's assume you are opening your browsers app with URL http://mydomain1:8080 and your endpoint is different (domain/IP/protocol or port), e.g. at http://mydomain2:49820/index.cfm/user/login/, then you need to add these server response header to your endpoints code that is submitting the JSON similiar like so:

<cfheader name="access-control-allow-origin" value="http://mydomain1:8080">
<cfheader name="access-control-allow-credentials" value="true">
<cfheader name="access-control-allow-headers" value="Content-Type">

For more informations, please see the documentation about CORS here