Access to XMLHttpRequest at '...' from origin 'http://localhost' has been blocked by CORS policy

Question

I'm trying to demo an api call with javascript to get Json result. Here is what I did:

<!DOCTYPE html>
<html>
    <head>
    </head>
        <script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <body>
        <div class="render-form">
            <script>
                $(document).ready(function() {
                    $.ajax({
                        type: 'GET',
                        headers:{    
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                            'Access-Control-Allow-Origin': '*' 
                        },
                        url: 'http://127.0.0.1:8080/activiti-rest/service/form/form-data?taskId=21159',
                        dataType: 'json',
                        success: function (data) {
                            alert(JSON.stringify(data));
                        }
                    });
                })
            </script>
        </div>
    </body>
</html>

But when I run it, I got an error:

Access to XMLHttpRequest at 'http://127.0.0.1:8080/activiti-rest/service/form/form-data?taskId=21159' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

After searching many post in here, I added:

headers:{    
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*' 
},

But it still not work with that error. How should I fix this?
Any reply would be very appreciate!
Thank you very much!

The `'Access-Control-Allow-Origin': '*' ` header must be added by the backend. — varun agarwal, Apr 11 '19 at 07:48
But this is a demo, I write in only 1 .php file. Anyway to fix it? — Tomato, Apr 11 '19 at 07:53
I updated my post, that is all my code in a php file and I use xampp to run it. — Tomato, Apr 11 '19 at 07:56
You need to add the header to the server not the client https://enable-cors.org/server_php.html — Aman B, Apr 11 '19 at 07:56
What is the code that creates a response for your request at the "/activiti-rest/service/form/form-data" route? — frzsombor, Apr 11 '19 at 08:00
it's a framework named Activiti, I use rest to get that response. — Tomato, Apr 11 '19 at 08:02
the receiving server should has `Access-Control-Allow-Origin` allowing the requesting server url, the server who is receiving the request should know that this is the url i need to allow. — Abhinaw Kaushik, Apr 11 '19 at 08:10
I don't know much about Activiti, but if it is your server side, and you don't have access to the code or the config of it, you will not be able to solve this. — frzsombor, Apr 11 '19 at 08:35
I just remember! The Activiti framework run on my Tomcat. Can I fix any on Tomcat to fix this? — Tomato, Apr 11 '19 at 08:43
The question is, as frzsombor asked, can you change the code of your backend side or not? Do you have access to it? — tarabor, Apr 11 '19 at 09:04
**Danger**: jQuery 1.11.1 has known security updates and is unsupported. Upgrade to a supported version of jQuery. — Quentin, Apr 11 '19 at 09:11
@Tomato Have you been able to try what I suggested in my answer? — frzsombor, Apr 16 '19 at 08:45
Sorry I forgot to reply your answer! I added filter in my web.xml in Tomcat but it's still not work. Currently I'm using Laravel and setup for Allow-Origin and it's work. I really don't know how to handle it with ajax — Tomato, Apr 16 '19 at 08:48

frzsombor · Answer 1 · 2019-04-11T13:13:57.313

If you are running the Activiti framework on Tomcat, you can config CORS support in Tomcat via a filter. You need to add this filter to your web.xml file and configure it to match your requirements.

Check Tomcat's documentation:
http://tomcat.apache.org/tomcat-8.0-doc/config/filter.html#CORS_Filter

Also please note:

As @Quentin pointed out in a comment you are using a jQuery version that is 5 years old and dangerously out of date.
The Access-Control-Allow-Origin header you are using in your ajax request is a response header, not a request header, so it should be returned by the server in the response. You can't use response headers in a request.

Access to XMLHttpRequest at '...' from origin 'http://localhost' has been blocked by CORS policy

1 Answers1