0

我在 Framework7 中收到了以下 ajax 请求，以便在 FW/1 (4.2) (Lucee 5.2.9) 中取回 json 数据，但不幸的是，由于通过 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" }
        ] 
    };

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

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 策略阻止：请求标头字段 access-control-allow-origin预检响应中的 Access-Control-Allow-Headers 不允许。

关于请求标头信息，我收到以下信息，据我所知，还传递了参数：

在此处输入图像描述

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

问候

4

2 回答 2

0

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

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

查看http://framework-one.github.io/documentation/4.3/developing-applications/#options-supportOPTIONS Support部分

更新

由于preFlightOptions正在使用...

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

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

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

更新 2

同样的问题已交叉发布到 FW/1 GitHub 存储库，因此为了透明起见，我想在这里为可能遇到此问题的任何人分享解决方案......

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

在控制器方法中，将原始标头与响应一起传递：

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

注意：出于安全原因，最佳做法是不允许使用“*”，而只允许调用/响应的域。（例如： http: //127.0.0.1 :12345 ）

于 2021-02-22T05:48:43.343 回答
0

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

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

假设您使用 URL 打开浏览器应用程序http://mydomain1:8080并且您的端点不同（域/IP/协议或端口），例如在 http://mydomain2:49820/index.cfm/user/login/，那么您需要添加这些服务器响应标头到提交 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 的文档

于 2021-02-22T17:19:05.903 回答