需要正确的 Extjs 语法来使用 Ext.Ajax.Request 实现 CORS 解决方案答案

【问题标题】：Need correct Extjs syntax to implement CORS solution using Ext.Ajax.Request需要正确的 Extjs 语法来使用 Ext.Ajax.Request 实现 CORS 解决方案
【发布时间】：2016-05-31 11:44:18
【问题描述】：

这个问题已经被问过几次并且也得到了回答，但是我正在尝试实施建议的方法但无济于事。这是一个典型的 CORS 问题。除了在我的情况下，我希望能够在浏览器上使用本地主机或我的电脑 IP。如果我的配置已设置为使用 IP，则使用 localhost 会给我 CORS 错误，反之亦然。任何指导表示赞赏。注意：请忽略我的截图和文字中不同的IP地址。

加载资源失败：服务器响应状态为 405（不允许方法） localhost/:1 XMLHttpRequest 无法加载 http://192.168.1.2/ARES/store/1.0/core/rest/authenticate/-99/-99。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost' 不允许访问。响应的 HTTP 状态代码为 405。

我的代码如下：我找不到将标头正确设置为我们 Allow-Origin 的方法。

Ext.Ajax.request({
  url: url,
  timeout: 2000,
  cors: true,
  method: 'GET',
  headers: {
    'Access-Control-Allow-Origin': 'http://localhost/'
  },
  success: function(response, options) {
    Ext.getBody().unmask();
    Manager.app.fireEvent('showLoginView');
  },
  failure: function(response, options) {
    Ext.getBody().unmask();
  }
});

当我在浏览器中运行它时，我看到如下请求标头：

【问题讨论】：

标签： javascript extjs browser cors sencha-architect

【解决方案1】：

来自Mozilla Developer Network：

跨域资源共享标准通过添加新的 HTTP 标头来工作，允许 服务器 描述允许使用 Web 浏览器读取该信息的源集。

我强调。

您将无法在客户端设置 CORS 标头，因为它们是防止客户端利用的一种手段。任何用户都可以弄乱您的客户端代码，因此每个安全措施都必须是服务器端的。

您使用的标头Access-Control-Allow-Origin 将用作HTTP 响应标头，而不是请求标头。如何正确实现它的答案很大程度上取决于所使用的后端语言/框架，您应该提出不同的问题。

但是，如果我正确理解了您的问题，那么您只在 localhost AKA 192.168.x.y 上工作，并且您只遇到主机名和 IP 之间的“跨站点请求”问题。使用相对 URL 应该是解决方案。您应该使用url:"../ARES/store/1.0/core/rest/authenticate/-99/-99"，而不是url:"http://localhost/ARES/store/1.0/core/rest/authenticate/-99/-99" 或url:"http://192.168.1.2/ARES/store/1.0/core/rest/authenticate/-99/-99"。

【讨论】：

有趣。我想它必须是一个回应。感谢那。但是，在对服务器的请求中是否需要设置客户端
一般来说，客户端不需要任何东西。根据您使用的框架，YMMV。
谢谢。相对于什么。如果我要在地址栏中输入一个地址，那会是什么。
路径将相对于地址栏中的地址。所以如果你在http://localhost/WMSManager/，../ARES/store/1.0/core/rest/authenticate/-99/-99会指向http://localhost/ARES/store/1.0/core/rest/authenticate/-99/-99，如果你在http://192.168.1.2/WMSManager/，它会指向http://192.168.1.2/ARES/store/1.0/core/rest/authenticate/-99/-99。
对，我的错我应该更精确。我有一个设置为 localhost/ares 的 config.js，现在如果我在地址栏中使用 ip，那就是我遇到问题的时候。所以它就在入口点。希望你和我在一起。

【解决方案2】：

或者简单地使用

为 chrome 创建快捷方式

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security

这将打开带有 disable-web-security 标志的 chrome，您的请求将毫无问题地到达服务器或其他“OPTIONS”方法

【讨论】：

谢谢。然而那不是最佳的，因为我不知道这样做的副作用。特别是当应用程序将被客户用于生产时。从外观上看，它“禁用了网络安全”..
对于客户端设置，这是一个坏主意。首先，你会强迫你的客户使用 chrome，而不是 firefox 或 internet explorer。其次，这是一项仅限开发人员的功能，可以更改，恕不另行通知。程序不应依赖 Chrome 开发者功能。
这可能是对的，因为有些客户使用IE。所以这个方案不能用。

【解决方案3】：

它是在 web 服务端完成的：这就是我实现它的方式：以下代码进入 Global.asax 文件。希望它可以帮助某人。

protected void Application_BeginRequest(object sender, EventArgs e)
{
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");

    if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
    {
        //These headers are handling the "pre-flight" OPTIONS call sent by the browser
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS,PUT, DELETE");
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
        HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
        HttpContext.Current.Response.End();
    }
}

【讨论】：