Greetings from a newcomer on 'stackoverflow.com'!
I'm encountering an issue with my AngularJS Application and I'm hopeful that the community here can provide some guidance.
To begin with, I've set up a new maven webapp project utilizing RESTful Web Services to fetch data from my mySQL-Database. Additionally, I've integrated a Cross-Origin Resource Sharing Filter.
For the Frontend, I've established a fresh HTML/JS Project using an AngularJS Seed Template.
Upon employing the HTTP findAll() Method, I successfully receive the data from the Database. findAll()_XML
However, when attempting to display this data on my AngularJS-Frontend, an error crops up:
XMLHttpRequest cannot load http://localhost:8080/myBackend/webresources/customer. Origin http://localhost:8383 is not allowed by Access-Control-Allow-Origin. (01:38:23:401 | error, javascript) at public_html/newhtml.html
While exploring various solutions advocating for adding Access-Control-Allow-Origin", "*" to the header, none seem to resolve the issue.
Below is the code snippet for reference. Any assistance would be greatly appreciated.
services.js:
'use strict';
var customerServices = angular.module('myApp.services', ['ngResource']);
customerServices.factory('Customers', function($resource) {
return $resource('http://localhost:8080/myBackend/webresources/customer', {}, {
findAll:{method:'GET',isArray:true}
});
});
dbController.js:
'use strict';
angular.module('myApp', ['myApp.services'])
//controller Example 2
//controller Example 3
.controller('dbController', function($scope, Customers) {
$scope.allcustomers = Customers.findAll();
});
newHtml.html:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html ng-app="myApp">
<head>
<title>Example-Applikation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-resource.js"></script>
<script src="js/friendsController.js"></script>
<script src="js/services.js"></script>
<script src="js/dbController.js"></script>
</head>
<body>
<br>
<div ng-controller="dbController">
DB-Test:
<ul>
<li ng-repeat="onecustomer in allcustomers">
Customer: {{onecustomer.email}}
</li>
</ul>
</div>
</body>
</html>
NewCrossOriginResourceSharingFilter.java
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package com.mycompany.mybackend;
import javax.ws.rs.container.ContainerRequestContext;
import javax.ws.rs.container.ContainerResponseContext;
import javax.ws.rs.container.ContainerResponseFilter;
import javax.ws.rs.ext.Provider;
/**
*
* @author
*/
@Provider
public class NewCrossOriginResourceSharingFilter implements ContainerResponseFilter {
@Override
public void filter(ContainerRequestContext requestContext, ContainerResponseContext response) {
response.getHeaders().putSingle("Access-Control-Allow-Origin", "*");
response.getHeaders().putSingle("Access-Control-Allow-Methods", "OPTIONS, GET, POST, PUT, DELETE");
response.getHeaders().putSingle("Access-Control-Allow-Headers", "Content-Type");
}
}
Customer.java
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package com.mycompany.mybackend;
import java.io.Serializable;
import javax.persistence.Basic;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.NamedQueries;
import javax.persistence.NamedQuery;
import javax.persistence.Table;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;
import javax.xml.bind.annotation.XmlRootElement;
/**
*
* @author loni
*/
// Remaining lines of code remain unchanged.