# Cross-origin request support

**URL:** <https://talk.openmrs.org/t/cross-origin-request-support/13047>\
**Category:** Development\
**Tags:** gsoc2017, spring\
**Created:** [August 24, 2017, 8:08pm UTC](https://talk.openmrs.org/t/cross-origin-request-support/13047 "2017-08-24T20:08:20Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![mavrk](https://talk.openmrs.org/user_avatar/talk.openmrs.org/mavrk/32/4139_2.png) [@mavrk](https://talk.openmrs.org/u/mavrk)\
**Post date:** [August 24, 2017, 8:08pm UTC](https://talk.openmrs.org/t/cross-origin-request-support/13047/1 "2017-08-24T20:08:22Z")

</div>

I have my module running Spring Securty 4 and I want to make a Cross-Origin AJAX Call to my module /token endpoint to issue a new token.

```
options = {
            url: tokenUri,
            type: 'POST',
            data: data,
            headers: {
                    "Authorization": "Basic dGVzdDM6YWQ= "
                },
            crossDomain: true
        };
$.ajax(options).done(function(res){`

```

This is the request I am making to my module localhost:8080/openmrs/ws/oauth/token endpoint.

And this is the exact ERROR I get `XMLHttpRequest cannot load localhost:8080/openmrs/ws/oauth/token. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.`

On looking online, I found an easy solution to the problem:

> <https://jira.spring.io/browse/SPR-13046>

```
<mvc:cors>
		<mvc:mapping path="/api/**"
					allowed-origins="http://domain1.com, http://domain2.com"
					allowed-methods="GET, PUT"
					allowed-headers="header1, header2, header3"
					exposed-headers="header1, header2" allow-credentials="false"
					max-age="123" />
		<mvc:mapping path="/resources/**" allowed-origins="http://domain1.com" />
	</mvc:cors>

```

However, this solution is since Spring MVC version 4.2 and above and OpenMRS uses 4.1.4.RELEASE

Any help or suggestion is appreciated. My ajax request -\> [https://pastebin.com/DYTkDKPS](https://pastebin.com/DYTkDKPS) My module -\> [https://github.com/mavrk/openmrs-module-oauth2-prototype/tree/oauth2-pure-rest](https://github.com/mavrk/openmrs-module-oauth2-prototype/tree/oauth2-pure-rest)

---

<div class="post-metadata">

**Author:** ![maany](https://talk.openmrs.org/user_avatar/talk.openmrs.org/maany/32/692_2.png) [@maany](https://talk.openmrs.org/u/maany)\
**Post date:** [August 25, 2017, 5:49am UTC](https://talk.openmrs.org/t/cross-origin-request-support/13047/2 "2017-08-25T05:49:39Z")

</div>

So, I am assuming you are making the request from your local js or html file (i.e. the url from where you are making request might look like file://C:/ ). Instead, you should host that file on a local server to avoid CORS at development time. If you have python\>3 installed, you can easily host a folder locally using

python -m http.server 8080 ([https://docs.python.org/3.6/library/http.server.html?highlight=http%20server#module-http.server](https://docs.python.org/3.6/library/http.server.html?highlight=http%20server#module-http.server))

Or IDE’s like WebStorm can automatically do it for you too

[https://blog.jetbrains.com/webstorm/2013/03/built-in-server-in-webstorm-6/](https://blog.jetbrains.com/webstorm/2013/03/built-in-server-in-webstorm-6/)

---

<div class="post-metadata">

**Author:** ![reubenv](https://talk.openmrs.org/user_avatar/talk.openmrs.org/reubenv/32/3818_2.png) [@reubenv](https://talk.openmrs.org/u/reubenv)\
**Post date:** [August 25, 2017, 6:03am UTC](https://talk.openmrs.org/t/cross-origin-request-support/13047/3 "2017-08-25T06:03:41Z")

</div>

@mavrk When I faced this issue. I used [this](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en) plugin. Enabling it lets me run it locally 🙂

---

<div class="post-metadata">

**Author:** ![mavrk](https://talk.openmrs.org/user_avatar/talk.openmrs.org/mavrk/32/4139_2.png) [@mavrk](https://talk.openmrs.org/u/mavrk)\
**Post date:** [August 25, 2017, 6:17am UTC](https://talk.openmrs.org/t/cross-origin-request-support/13047/4 "2017-08-25T06:17:47Z")

</div>

Thank you @maany @reubenv. I am running my html files from localhost i.e. Apache So my files are hosted on localhost:\ and module on localhost:8080\ (Tomcat). I introduced a CORS filter to allow all headers for my module so localhost:8080openmrs\ws is covered by that filter.

This is the error I am getting as of now, ![](https://talk.openmrs.org/uploads/default/original/2X/7/745cf291e2a05cfd138668a3cad911d5d19102af.PNG)

And I’ve also enabled the CORS chrome plugin you mentioned.

---

<div class="post-metadata">

**Author:** ![mavrk](https://talk.openmrs.org/user_avatar/talk.openmrs.org/mavrk/32/4139_2.png) [@mavrk](https://talk.openmrs.org/u/mavrk)\
**Post date:** [August 25, 2017, 6:42am UTC](https://talk.openmrs.org/t/cross-origin-request-support/13047/5 "2017-08-25T06:42:46Z")

</div>

Running the application as well as the module on Tomcat works! (No more cross-origin)

---

<div class="post-metadata">

**Author:** ![suthagar23](https://talk.openmrs.org/user_avatar/talk.openmrs.org/suthagar23/32/6342_2.png) [@suthagar23](https://talk.openmrs.org/u/suthagar23)\
**Post date:** [August 25, 2017, 2:14pm UTC](https://talk.openmrs.org/t/cross-origin-request-support/13047/6 "2017-08-25T14:14:26Z")

</div>

@reubenv We are developers, So we can use that plugin to enable the CORS with our environment. But when another one tries to use this module, he may face this problem again (possibly he may not have that plugin).

So better way is enable CORS on the server side 🙂

---

<div class="post-metadata">

**Author:** ![reubenv](https://talk.openmrs.org/user_avatar/talk.openmrs.org/reubenv/32/3818_2.png) [@reubenv](https://talk.openmrs.org/u/reubenv)\
**Post date:** [August 25, 2017, 3:51pm UTC](https://talk.openmrs.org/t/cross-origin-request-support/13047/7 "2017-08-25T15:51:27Z")

</div>

Makes sense, couldn’t agree more 😄