需要正确的 Extjs 语法才能使用 Ext.Ajax.Request 实施 CORS 解决方案

Question

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

Failed to load resource: the server responded with a status of 405 (Method Not Allowed) localhost/:1 XMLHttpRequest cannot load http://192.168.1.2/ARES/store/1.0/core/rest/authenticate/-99/-99. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 405.

我的代码如下：我无法找到一种方法来为我们 Allow-Origin 正确设置 header。

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

当我在浏览器中运行时，我看到 Request Headers 如下：

Answer 1

来自 Mozilla Developer Network：

The Cross-Origin Resource Sharing standard works by adding new HTTP headers that allow servers to describe the set of origins that are permitted to read that information using a web browser.

我强调的。

您将无法设置 CORS header 的客户端，因为它们是防止 client-side 利用的一种手段。任何用户都可以破坏您的客户端代码，因此每项安全措施都必须 server-side.

您使用的 header Access-Control-Allow-Origin 将用作 HTTP 响应 header，而不是请求 header。如何正确实施它的答案在很大程度上取决于所使用的后端language/framework，你应该提出不同的问题。

但是如果我正确理解你的问题，你只在 localhost AKA 192 上工作。168.x.y 并且你只有主机名和 IP 之间的 "cross-site requests" 有问题。使用相对 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"

Answer 2

或者简单地使用

为 chrome 创建快捷方式

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

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

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

需要正确的 Extjs 语法才能使用 Ext.Ajax.Request 实施 CORS 解决方案

Need correct Extjs syntax to implement CORS solution using Ext.Ajax.Request

javascript

extjs

browser

cors

sencha-architect