如何修复 extjs6 中的跨源错误？答案

【问题标题】：How fix cross origin error in extjs6?如何修复 extjs6 中的跨源错误？
【发布时间】：2017-04-20 09:27:46
【问题描述】：

我正在客户端使用 Extjs-6.0.0 开发一个应用程序。我在 port 80 中运行客户端应用程序。我的服务器端应用程序在端口 8084 中运行。当我使用form.submit 提交表单时，出现以下错误。

XMLHttpRequest 无法加载 localhost:8084/GeoAd/ad/add。跨源请求 > 仅支持协议方案：http、data、chrome、chrome-extension、> https、chrome-extension-resource。

chrome-extension、https、chrome-extension-resource。未捕获 NetworkError：无法在“XMLHttpRequest”上执行“发送”：无法执行加载'localhost:8084/GeoAd/ad/add'。

我该如何解决这个问题？
注意：我的服务器端语言是 java web 应用程序。

【问题讨论】：

你在服务器端使用哪个框架？
在 JSONP 代理中获得战利品：docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/…

标签： extjs xmlhttprequest cross-domain extjs6

【解决方案1】：

您需要跨域 (CORS) XHR 请求以使用 POST 方法调用不同端口上的服务器（普通 XHR 使用相同的协议/域/端口）。使用 ExtJS4，您可以简单地将以下属性添加到您的 ajax 请求中：

...
useDefaultXhrHeader: false,
cors: true,
...

我认为它也适用于 6。

无论如何，要在不同的端口使用 POST 调用您的 java WS，您需要对其进行配置以管理 CORS。基本上，您需要在响应中添加一些标题，但您会根据您使用的堆栈找到好的文档。

【讨论】：

在form.submit 方法中我不能使用代理。
我有一些问题this
我认为您无法使用 form.submit 实现这一点，因为您无法控制标题，但“Ext.Ajax.request”应该可以工作。如果在 POST 请求之前发送了 OPTION 调用，请查看网络控制台。
是的，OPTION 调用是在 POST 请求之前发送的
因此您应该验证您调用的 Web 服务是否允许来自您的客户端的 CORS。

【解决方案2】：

向你的spring项目添加一个过滤器，通过添加一些响应头来允许跨域：

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * see https://spring.io/guides/gs/rest-service-cors/
 *
 * @author dariushvb2010
*/
public class SimpleCorsFilter implements Filter {

  public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletRequest hreq = (HttpServletRequest) req;
    String origin = hreq.getHeader("Origin");
    if (origin != null) {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
    }
    chain.doFilter(req, res);
  }

  public void init(FilterConfig filterConfig) {
  }

  public void destroy() {
  }

}

所以将这些行添加到 web.xml 中：

<filter>
    <filter-name>corsFilter</filter-name>
    <filter-class>ir.javan.geoad.util.SimpleCorsFilter</filter-class>
</filter>

<filter-mapping>
    <filter-name>corsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

【讨论】：

【解决方案3】：

如果您尝试通过在 Chrome 快捷方式属性的目标末尾使用以下配置从 Chrome 浏览器中点击代码，则可以避免 CORS 错误：

--disable-web-security --user-data-dir

同时检查 Disable same origin policy in Chrome

【讨论】：