Fw/1(Lucee) - Ajax Framework7 中的 CORS 策略请求失败

Question

为了在 FW/1 (4.2) (Lucee 5.2.9) 中取回 json 数据，我在 Framework7 中收到了以下 ajax 请求，但不幸的是我得到了错误由于 Chrome 浏览器的 CORS 政策。

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

 });

在我的 Fw/1 Application.cfc 中，我有以下设置：

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

并且在我的主控制器中获取操作我通过

获取json

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

很遗憾，我收到了以下消息

从源 'http://localhost' 访问 'http://127.0.0.1:49820/index.cfm/user/login/' 处的 XMLHttpRequest 已被 CORS 策略阻止：请求 header 字段 access-control-allow-origin 不允许 Access-Control-Allow-Headers 预检响应.

关于 request-header 信息，我收到以下信息，据我所知，还传递了参数：

有什么想法可以帮助我吗？

此致

Answer 1

您使用的 FW/1 是什么版本？我假设是最新的？

我对 Framework7 的 ajax 功能如何工作一无所知，但我会尝试设置 preflightOptions = true，如果您还没有，请在 [=14] 的 FW/1 框架设置中=] 看看是否可以解决您的问题。

查看 http://framework-one.github.io/documentation/4.3/developing-applications/#options-support

的 OPTIONS Support 部分

更新

由于 preFlightOptions 正在使用...

我的下一个建议是在 FW/1 的框架设置中设置允许的 header。您可以通过定义 optionsAccessControl.headers = "your, headers, here" 来做到这一点。这些都在我已经分享的 link 中提到了。

如果您愿意，可以将 optionsAccessControl 结构定义为一个整体，并设置其他键。

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

更新 2

同样的问题 cross-posted to the FW/1 GitHub Repository 所以为了透明起见，我想在这里与可能遇到此问题的任何人分享解决方案...

在 Application.cfc 中，包括以下框架设置：

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

在控制器方法中传递原点 header 和响应：

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

注意：出于安全原因，最好不要使用“*”，而只允许 calling/responding 域。（示例：http://127.0.0.1:12345）

Answer 2

CORS 的功能是阻止端点未明确允许的浏览器请求（这是请求 'origin'）。在您的情况下，端点位于 http://127.0.0.1:49820/index.cfm/user/login/。不可能通过纯客户端代码告诉客户端（就像您通过在 ajax 请求的请求 header 中提交它们所做的那样）绕过它。这会破坏 CORS 功能并破坏 CORS 的设计目的。

实现 CORS 的正确方法是在 FW/1 框架的 index.cfm/user/login/ 端点将它们实现为服务器响应 headers，而不是 AJAX 请求。在 cfml 中，您通常通过使用 cfheader 标记设置它们来实现服务器响应 headers。以下是允许请求的一些典型示例。请验证 FW1 端点是否正在提交这些服务器 http 响应 headers（例如，通过使用 chrome 开发工具检查响应）。

假设您使用 URL http://mydomain1:8080 打开浏览器应用程序并且您的端点不同（domain/IP/protocol 或端口），例如在 http://mydomain2:49820/index.cfm/user/login/，然后您需要将这些服务器响应 header 添加到您提交 JSON 类似代码的端点代码中，如下所示：

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

有关更多信息，请参阅有关 CORS 的文档 here

Fw/1(Lucee) - Ajax Framework7 中的 CORS 策略请求失败

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

fw1

lucee

html-framework-7