How send Ajax to remote server 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. I want to create an Ajax request to send a request to server and this request have attributes as follow:

var json = {
    "@class": "ir.javan.geoad.entity.Melk",
    "title": "itsme",
    "description": "Hi all",
    "callPhone": "0912312312",
    "address": "ya ali",
    "accuracy": "MANTAQE",
    "user": {
        "email": "itsme.mm@gmail.com",
        "name": "asdf",
        "family": "asdf"
    }
};
Ext.Ajax.request({
    url: 'http://localhost:8084/GeoAd/ad/Add',
    useDefaultXhrHeader: false,
    method: "POST",
    cors: true,
    headers: {
        "Content-Type": "application/json"
    },
    jsonData: json,
    success: function(response){
        text = response;
    }
});

But this does not work. How can I do this?

Answer 1

Because your server side app is on a different port, AJAX requests to it will not work unless you have a corresponding Access-Control-Allow-Origin header in the response. This is a CORS (cross-origin resource sharing) thing.

Read more about it here: http://dev.housetrip.com/2014/04/17/unleash-your-ajax-requests-with-cors/

Answer 2

This is happening due to CORS.

You have to disable the browser security to access such request.

For Chrome following post might be useful to you -

Disable same origin policy in Chrome

Answer 3

As others have pointed out, this is a CORS issue.

If you do not want to disable the Same Origin policy completely, you can use this Chrome extension to make the CORS calls when required.