No 'Access-Control-Allow-Origin' header is present on the requested resource

Jira Development
, , ,
1

Hi Experts,

I am calling rest api “https://something.com/EmpEmployment?xxxxx” form JIRA plugin using jquery. But i am getting Error"No ‘Access-Control-Allow-Origin’ header is present on the requested resource" in browser. If i disable security of browser then my api is working. Kindly help me how to resolve this JIRA.

$.ajax({
     type: "GET",
    async: false,
    url: https://something.com/odata/v2/EmpEmployment?xxxxx,
    beforeSend: function(xhr){
			        	xhr.setRequestHeader ("Authorization", "Basic " +  btoa(user_name+'@'+tenant_id+":" + passwords));
					},			
			        success: function (data) { 
 });

XMLHttpRequest cannot load https://something.com/EmpEmployment?$select=use…-05T23:59:59.999’&$format=JSON&$orderby=personIdExternal&_=1491373787424. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://user:2990’ is therefore not allowed access. The response had HTTP status code 401

2

Browsers by default prevent cross-domain AJAX requests (what you are attempting to do). You can allow cross-domain AJAX request on the server side if you return the Access-Control-Allow-Origin header.

See Cross-Origin Resource Sharing (CORS) - HTTP | MDN

3

Thanks Raimonds . But the problem is that i am calling a external api “https://something.com/EmpEmployment?xxxxx” . Kindly let me know what is the solution. what should i need do for above error. Any configuration or any code i am missing in Ajax call

4

If you cannot change the CORS headers on the external API, you will have to setup an intermediate proxy server. The proxy server would either run on the same domain (preventing cross-origin problems in the AJAX call) or have the appropriate CORS headers. The proxy server can safely retrieve the content from the remote external API without any restrictions.

1 Like
5

Hi Remie,
How to setup proxy server. Do you have any reference code?

6

If you are creating a JIRA server P2 plugin, you could create a servlet module with a GET handler which would use Apache HttpClient (example) to fetch the content from the external API and return them to your client-side script.

1 Like
7

Hi All,

It got resolved this problem. Now i am calling this rest service form HTTP client(from server side java code) instead of calling from jquery(from client side code JavaScript). Its is working fine without any error.

Thanks to all.

8

Hi all,
dchouksey89 worked around that problem by using Java, other people have put a proxy between Jira and their JS code. It looks like this is a known issue for a long time, and still unassigned:

https://jira.atlassian.com/browse/JRASERVER-59101
https://ecosystem.atlassian.net/browse/REST-366

I wonder how such a severe bug, which makes it impossible to integrate a browser-based UI with Jira, can have a “low” priority? I find this VERY disappointing… it blocks my integration project since I can’t set up an additional server just to proxy Jira API requests. :frowning:

1 Like
9

I’ll bump this as its a massive issue for me to have to setup a proxy just to integrate a SPA with Jira. Its ridiculous. I spent 3 days setting up the Oauth dance for a VueJs app and was really disappointed to find out that even a authenticated app gets cross origin request errors.

10

So… the problem is actually not specific to Jira. This is just how XmlHttpRequest (and in extend maybe the internet) works. This is a basic security issue which all browsers have implemented, and it helps keep the internet safe. You can only make client-side requests to the same domain because this is the only way the browser can determine that the resources is loaded from a connection that is trusted by the end-user (because they decided to load the application from that domain).

It is also the end-user that decides to install your P2 add-on, and as such, accept that it will proxy content from a 3rd party service (you should be clear about that in your add-on description).

For cloud add-ons, if you want to get content from a 3rd party service into your integration, you can use “serverless” products like AWS Lamba or GCP Cloud Functions to implement a proxy server using many popular coding languages. This should not be a huge effort nor should it be expensive (as you will only pay-per-use).

11

To clarify: you can use cross domain resources if cross-origin-resource-sharing (CORS) headers allow it, but that implies that either you have control over these headers or that the 3rd party service has set very loose rules (which they should not, for security reasons). It is common practice to secure your resources, and also check them using https://observatory.mozilla.org

You might want to read up on Cross Server Scripting (XSS) and Cross Origin Resource Sharing (CORS)

12

Can you please help with details? We are also facing exactly same issue

14

You May Check-up For This Solution Of Icetutor

15

This is happening because of the CORS (Cross Origin Resource Sharing) . For every HTTP request to a domain, the browser attaches any HTTP cookies associated with that domain. This is especially useful for authentication, and setting sessions. You are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request.

JSONP ( JSON with Padding ) is a method commonly used to bypass the cross-domain policies in web browsers. You’re on domain example.com , and you want to make a request to domain example.nett . To do so, you need to cross domain boundaries. JSONP is really a simple trick to overcome the XMLHttpRequest same domain policy. So, instead of using XMLHttpRequest we have to use < script > HTML tags, the ones you usually use to load JavaScript files , in order for JavaScript to get data from another domain.

Localhost

If you need to enable CORS on the server in case of localhost, you need to have the following on request header.

Access-Control-Allow-Origin: http://localhost:9999

16

If you try to make a cross-origin request and your server isn’t set up correctly, you’ll get the warning “No ‘access-control-allow-origin’ header is present on the requested resource.” You’ll need to either configure your server to handle cross-domain requests or find a means to get around the difficulty by using non-cross-domain requests instead. No 'access-control-allow-origin' header is present on the requested resource. Jquery. - Kodlogs.net