如何修复extjs6中的交叉起源错误？

Question

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

  

XMLHttpRequest无法加载localhost：8084 / GeoAd / ad / add。 <来源请求>仅支持协议方案：http，数据，chrome，chrome-extension，＆gt; https，chrome-extension-resource。

     

chrome-extension，https，chrome-extension-resource。未捕获   NetworkError：无法在'XMLHttpRequest'上执行'send'：失败   加载'localhost：8084 / GeoAd / ad / add'。

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

Answer 1

您需要跨域（CORS）XHR请求使用POST方法在不同的端口（普通XHR使用相同的协议/域/端口）上调用服务器。 使用ExtJS4，您只需添加以下属性的ajax请求：

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

我认为它也适用于6。

无论如何，要在不同的端口中使用POST调用java WS，您需要将其配置为管理CORS。基本上你需要为你的回复添加一些标题，但你会发现根据你正在使用的堆栈有很好的文档。

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

Answer 3

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

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

同时检查 Disable same origin policy in Chrome