我不能使用ajax从我的网站上使用Rest API，其中API和网站的端口不同

Question

I have a Rest API developed in spring boot.It is running on port 9090.I have to consume the api from my website to get some data using angluarjs.The website is hosted in a shared hosting server which port is 80.Now there occurs problem in consuming the API from 80 port to a different port 9090.

I also tried using curl from php there is same issue occurs.

Here is my API : https://****url****:9090/aubwebsite-0.0.1-SNAPSHOT/api/document/alldocuments

AngularJs Controller is :

$scope.getDocuments = function(){
                var search  = {
                    pageNo : 1,
                    studentId:"",
                    studentName:"",
                    rowPerPage:11
                };
                $http({
                    method: "POST",
                    url: 'http://****url****:9090/aubwebsite-0.0.1-SNAPSHOT/api/document/alldocuments',
                    data: $httpParamSerializerJQLike(search),
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }).then(function(response) {
                    console.log(response.data.documentList);
                    if(response.data.documentList === undefined || response.data.documentList.length == 0){
                        $scope.documents = [];
                    }else {
                        $scope.documents = response.data.documentList;
                        $scope.quantity = response.data.itemQuantity;
                    }
                    console.log($scope.documents,'All documents List');
                    console.log(response.data);
                });
            }

From the above call there is no api call take place.

How to consume an API from website whereas the port of the API and website deployed are different?

Answer 1

You need to implement Cross-Origin Resource Sharing, known as CORS.

At its simplest, implement something like the following as a response to OPTIONS request:

Access-Control-Allow-Origin: http://your-origin-website
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 86400

However, you claim you have the same issue when using curl from PHP. That shouldn't happen.

Some further discussion on this site related to CORS:

• How does Access-Control-Allow-Origin header work?
• Why doesn't adding CORS headers to an OPTIONS route allow browsers to access my API?