How fix cross origin error in extjs6?

Question

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 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. Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'localhost:8084/GeoAd/ad/add'.

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

Answer 1

you need cross-domain (CORS) XHR requests to call the server on a different port (normal XHR works with same protocol/domain/port) with POST method. With ExtJS4 you can simply add to your ajax request following attributes:

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

I think it will work on 6 too.

Anyway, to call with POST your java WS in a different port, you will need to configure it to manage CORS. Basically you need to add some headers to you responses but you will find good documentation according to the stack you are using.

Answer 2

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

}

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>

Answer 3

CORS errors can be avoided if you are trying to hit the code from Chrome browser by using the following config at the end of the target of the Chrome shortcut properties:

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

Also check Disable same origin policy in Chrome