如何解决extjs6中的交叉原点错误？ [英] How fix cross origin error in extjs6?

问题描述

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

I'm developing an application using Extjs-6.0.0 in client side. I run client side application in port 80. My server side application running in port 8084. When I submit a form with form.submit, the follow errors are occur.

XMLHttpRequest无法加载localhost：8084 / GeoAd / ad / add。跨原点请求>仅支持协议方案：http，数据，chrome，chrome扩展，> https，chrome扩展资源。

XMLHttpRequest cannot load localhost:8084/GeoAd/ad/add. Cross origin requests > are only supported for protocol schemes: http, data, chrome, chrome-extension, > https, chrome-extension-resource.

chrome-extension，https，chrome-extension-resource。未捕获
NetworkError：无法对XMLHttpRequest执行发送：未能成功
load'localhost：8084 / GeoAd / ad / add'。

chrome-extension, https, chrome-extension-resource. Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'localhost:8084/GeoAd/ad/add'.

如何解决此问题 ？

注意：我的服务器端语言是java web应用程序。

How can I fix this problem?
Note: My server side language is java web application.

推荐答案

添加一个过滤器到你的spring项目中，通过添加一些头来响应来跨源：

Add a filter to your spring project to allow cross-origin by adding some headers to response:

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 ：

So add these lines to 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>

这篇关于如何解决extjs6中的交叉原点错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！