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

Question

I want to access information from same domain but with different port number, To allow this I am adding Access-Control-Allow-Origin with the response header.

Servlet Code:(present on www.example.com:PORT_NUMBER)

String json = new Gson().toJson(list);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.setHeader("Access-Control-Allow-Origin", "*");//cross domain request/CORS
response.getWriter().write(json);

jQuery code:(present on www.example.com)

$.post('http://www.example.com:PORT_NUMBER/MYSERVLET',{MyParam: 'value'}).done(function(data)
{
    alert(data);
});

Several times I am getting this error(in console):

XMLHttpRequest cannot load 'http://www.example.com:PORT_NUMBER/MYSERVLET'
No 'Access-Control-Allow-Origin' header is present on the requested resource.

This error mostly occures first time when $.post gets executed. Second time it allows.

My question is that is there missing in servlet or in jQuery code?

Any suggestion will be appreciated.

Update1

I have changed:

response.setHeader("Access-Control-Allow-Origin", "*");

To:

response.setHeader("Access-Control-Allow-Origin", "http://www.example.com");

Then I am getting this error in console:

XMLHttpRequest cannot load http://www.example.com:PORT_NUMBER/MyServletName
The 'Access-Control-Allow-Origin' whitelists only 'http://www.example.com'
Origin 'http://www.example.com' is not in the list,
and is therefore not allowed access.

[Note: whitelist and origin are same, but still it gives error. It works sometimes, and gives above error sometimes.]

Let me know if you need anymore information.

It's pretty simple: your server response does not include the proper CORS headers. This is not a browser bug, and there is no client-side code issue. If you want to get to the bottom of this, trace your server-side code a bit closer to ensure the headers are ALWAYS included in the response. You should start by inserting a proxy between client and server to examine the headers yourself. — Ray Nicholus, Jan 02 '14 at 14:29

score 33 · Accepted Answer · edited May 23 '17 at 10:31

33

Solution:
Instead of using setHeader method I have used addHeader.

response.addHeader("Access-Control-Allow-Origin", "*");

* in above line will allow access to all domains, For allowing access to specific domain only:

response.addHeader("Access-Control-Allow-Origin", "http://www.example.com");

For issues related to IE<=9, Please see here.

edited May 23 '17 at 10:31

Community

1
1

answered Jan 03 '14 at 04:15

Bhushan

6,151
13
58
91

1

what to do if we want to allow multiple domains? the second parameter would be like this? "http://www.example1.com","http://www.example2.com" or something else? – Muhammad Noman May 16 '18 at 10:53
@MuhammadNoman Have you tried writing addHeader twice? I think `addheader` method adds header and doesn't overwrite the existing ones. – Bhushan May 19 '18 at 06:39
What if I want to add two domains? I'm not sure if I'm thinking this right, but if I need to allow cors to two specific domains like www.example1.com and www.example2.com. The header should look something like response.addHeader("Access-Control-Allow-Origin", "http://www.example1.com, http://www.example2.com"); ? Or how can I do that? – Sebastian Luna Jan 08 '20 at 13:31

Jai · Answer 2 · 2014-01-02T13:43:13.783

2

You are missing 'json' dataType in the $.post() method:

$.post('http://www.example.com:PORT_NUMBER/MYSERVLET',{MyParam: 'value'})
        .done(function(data){
                  alert(data);
         }, "json");
         //-^^^^^^-------here

Updates:

try with this:

response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));

edited Jan 02 '14 at 13:43

answered Jan 02 '14 at 11:09

Jai

74,255
12
74
103

1

Parsing the response is not the issue here. The problem is that the response does not include the proper CORS headers. This suggests a server side issue. – Ray Nicholus Jan 02 '14 at 12:42
@RayNicholus _My question is that is there missing in servlet or in jQuery code?_ so i suggested the missing dataType from the `$.post()` method, because response is json from the server. – Jai Jan 02 '14 at 12:48
1

Again, the issue is a lack of a header in the response. The content of the response is irrelevant here. The code in the question isn't even making an attempt to parse the response. – Ray Nicholus Jan 02 '14 at 12:51

score 1 · Answer 3 · answered Mar 17 '15 at 06:12

I find the solution in spring.io,like this:

    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");

score 0 · Answer 4 · answered Mar 02 '16 at 19:28

On your servlet simply override the service method of your servlet so that you can add headers for all your http methods (POST, GET, DELETE, PUT, etc...).

@Override
    protected void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {

        if(("http://www.example.com").equals(req.getHeader("origin"))){
            res.setHeader("Access-Control-Allow-Origin", req.getHeader("origin"));
            res.setHeader("Access-Control-Allow-Headers", "Authorization");
        }

        super.service(req, res);
    }

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

4 Answers4

Linked