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.

Have a loot at JSONP proxy : http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.data.proxy.JsonP-cfg-callbackKey — Bala, Sep 14 '15 at 11:45

score 0 · Answer 1 · answered Aug 14 '15 at 07:36

0

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.

answered Aug 14 '15 at 07:36

Federico Baron

897
6
15

In `form.submit` method I can't use a proxy. – Morteza Malvandi Aug 14 '15 at 16:38
I have some problem as [this](http://stackoverflow.com/questions/32021086/how-send-ajax-to-remote-server-in-extjs6) – Morteza Malvandi Aug 15 '15 at 03:22
I think you can't achieve this using form.submit because you can't control headers, but "Ext.Ajax.request" should work. Look in the network console if the OPTION call is sent before the POST request. – Federico Baron Aug 15 '15 at 11:26
Yes, the OPTION call is sent before the POST request – Morteza Malvandi Aug 15 '15 at 11:29
So you should verify if the web service you are calling allows CORS from your client. – Federico Baron Aug 15 '15 at 11:34

score 0 · Answer 2 · answered Aug 17 '15 at 01:50

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>

score 0 · Answer 3 · edited May 23 '17 at 11:54

0

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

edited May 23 '17 at 11:54

Community

1
1

answered Apr 19 '17 at 18:27

Dipankar Medhi

1
1

How fix cross origin error in extjs6?

3 Answers3

Linked