Issues encountered while accessing REST in Angular 6 due to Access-Control-Allow-Origin restrictions

Question

Issues encountered while accessing REST in Angular 6 due to Access-Control-Allow-Origin restrictions

I am currently facing an issue with loading data from a REST source into my Angular 6 app using http: HttpClient from '@angular/common/http'. When I try to call the app in the browser using ng serve --open, it seems like CORS is causing a problem. I have tried various ways to tackle this by setting server or client headers with Access-Control-Allow-Origin, but so far, I haven't been successful in making this REST call work. Below is the code snippet of what I have implemented.

Upon calling the Angular app in the browser, I receive the following error:

Failed to load http://localhost:8080/mysite-backend/rest/report/single/d83badf3: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested 
resource. Origin 'http://localhost:4200' is therefore not allowed 
access.

Interestingly, when I directly input the URL (

http://localhost:8080/mysite-backend/rest/report/single/d83badf3

) in the Chrome browser, it works perfectly fine giving me the expected JSON response:

{"id":"d83badf3","language":"en","categoryId":"a5","title":"Simcity","created":1527723183880,"modified":1527723183880}

In Angular 6, I have created a service class generated through ng generate service tour. Within this class, there's a method getTour(id: string) that simply makes a call to the specified URL and returns the retrieved JSON-string as a Tour object:

[Service Class Code Here]

The corresponding Tour object looks like this:

[Tour Object Code Here]

To resolve this CORS issue, I have also imported HttpClientModule from '@angular/common/http' in both the imports and providers arrays within app.module.ts.

On the backend side, the RESTful WebService is built in Java. The relevant part of the code includes the

getReport(@PathParam("reportId") String reportId)

method which retrieves a Report object and returns it within a Reponse:

[Java WebService Code Here]

What steps should I take to ensure a successful call from the Angular 6 client to the Java RESTful WebService?

java angular rest web-services cors

Answer 1

Answer №1

The root of the problem is not in Angular itself, but rather in the web server being used.

Whenever an HTTP client request is made in Angular, it always sends a preflight request of type OPTIONS before proceeding with the actual request.

You may need to include the OPTIONS request method in this line:

   .header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")

Answer 2

The root of the problem is not in Angular itself, but rather in the web server being used.

Whenever an HTTP client request is made in Angular, it always sends a preflight request of type OPTIONS before proceeding with the actual request.

You may need to include the OPTIONS request method in this line:

   .header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")

Answer 3

Answer №2

After spending the entire day trying to solve the issue, I initially believed it was related to Angular. However, upon further investigation, it became clear that the problem actually stemmed from the server side. The solution involved adding an @CrossOrigin annotation above the get method.

@GET
@CrossOrigin(origins = "http://localhost:4200")
@Path("/single/{reportId}")
public Response getReport(@PathParam("reportId") String reportId) {
    //return Mock.getReport(reportId);
    return Response.ok() // 200
                   .entity(Mock.getReport(reportId))
                   .header("Access-Control-Allow-Origin", "*")
                   .header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")
                   .allow("OPTIONS").build();
}

Answer 4

After spending the entire day trying to solve the issue, I initially believed it was related to Angular. However, upon further investigation, it became clear that the problem actually stemmed from the server side. The solution involved adding an @CrossOrigin annotation above the get method.

@GET
@CrossOrigin(origins = "http://localhost:4200")
@Path("/single/{reportId}")
public Response getReport(@PathParam("reportId") String reportId) {
    //return Mock.getReport(reportId);
    return Response.ok() // 200
                   .entity(Mock.getReport(reportId))
                   .header("Access-Control-Allow-Origin", "*")
                   .header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")
                   .allow("OPTIONS").build();
}

Answer 5

Answer №3

I spent nearly an entire day troubleshooting a client-side Angular application, only to realize that the issue was actually on the server side with the Node.js application needing to allow CORS.

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

Answer 6

I spent nearly an entire day troubleshooting a client-side Angular application, only to realize that the issue was actually on the server side with the Node.js application needing to allow CORS.

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

Answer 7

Answer №4

I successfully resolved the CORS issue by using a proxy.

To begin, create a file named proxy.conf.json at the same level as your package.json file.
Add the following content:

{
    "/api/*": {
        "target": "http://external-domain-you-wanted-to-access",
        "secure": false,
        "changeOrigin": true
    }
}

Use the command ng serve --proxy-config proxy.conf.json to run the proxy setup.

More information can be found in this reference link.

Answer 8

I successfully resolved the CORS issue by using a proxy.

To begin, create a file named proxy.conf.json at the same level as your package.json file.
Add the following content:

{
    "/api/*": {
        "target": "http://external-domain-you-wanted-to-access",
        "secure": false,
        "changeOrigin": true
    }
}

Use the command ng serve --proxy-config proxy.conf.json to run the proxy setup.

More information can be found in this reference link.

Answer 9

Answer №5

Here are the steps that helped me to solve the issue:

1- Make sure to create a file named proxy.conf.json in the root of your project, rather than the src folder.

2- Copy and paste the following code into the proxy.conf.json file:

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

3- Add the line below in your package.json file under scripts:

"start": ng serve --proxy-config proxy.conf.json

4- When starting the application, use npm start instead of ng serve.

Answer 10

Here are the steps that helped me to solve the issue:

1- Make sure to create a file named proxy.conf.json in the root of your project, rather than the src folder.

2- Copy and paste the following code into the proxy.conf.json file:

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

3- Add the line below in your package.json file under scripts:

"start": ng serve --proxy-config proxy.conf.json

4- When starting the application, use npm start instead of ng serve.

Issues encountered while accessing REST in Angular 6 due to Access-Control-Allow-Origin restrictions

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Retrieve the parent route component in Angular

Implementing Dynamic Columns and Rows in GridLayout using NativeScript

Developing a cutting-edge project: Integrating Angular with PrimeNG to create a dynamic Sakai skeleton demo

Error: The value entered for the 'end_time' column in row 1 is outside of the acceptable range

"What are the necessary components to include in UserDTO and what is the reasoning behind their

Tips to store Google fonts in the assets directory

Error message: org.apache.jorphan.util.JMeterException: Unable to execute bsh method: evalSourced script: inline evaluation of:

Showing a dynamically updated array in Angular

Having difficulty grasping the significance of the data received from the API response

Modify the color of the Swing link label for disabled state

Issue encountered when using Angular CLI to generate new files in the current directory

Using Angular, you can easily add a <div> dynamically to all elements that share a class

Showing numeric values with decimals in an Angular Handsontable table

Angular: Smooth transitions for ngif animations - Learn how to animate ngif elements seamlessly as one element is removed from the DOM

Automated test does not trigger Selenium Webdriver modal popup

Changing row colors based on property conditions in Angular 4

Customizing the Global Error Handler in Angular

Navigating the correct way to filter JSON data using HttpClient in Angular 4

What is the process for an Angular Component to receive a return object from a service following an HTTP

What steps can I take to guarantee that the observer receives the latest value immediately upon subscribing?