How to setup CORS in angular latest cli version

Question

What is the right way in production for doing CORS thing in the latest version?

My function:

 public fetchData() {
    console.log("GET WITH HEADERS");


    return this.http.get('http://192.168.31.73:8080/myjersey/rest/hello/dd').map(
      (response) => response
    )
      .subscribe(
      (data) => console.log(data)
      )
  }

  public authentication(email, password) {
    console.log("POST WITH HEADERS");
    const body = { name: 'Brad' };

    this.http
      .post('http://192.168.31.73:8080/myjersey/rest/hello/dd', {
        email: email,
        password: password

      }, {
        headers: new HttpHeaders().set('Access-Control-Allow-Origin', '*')
          .set('Access-Control-Allow-Credentials', 'true')
          .set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE')
          .set('Access-Control-Allow-Headers', 'X-Custom-Header'),
      })
      .subscribe();


  }

below is the exception I am getting:

Failed to load http://192.168.31.73:8080/myjersey/rest/hello/dd: 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.

Somehow my Http Get is working but not POST.Please suggest what should i do in this case i have added Access-Control-Allow-Origin in both request and response still getting CORS issue.

PS: I have no knowledge of PHP. I am using Jersey Rest Services with angular.

Answer 1

You need to update the server in order to fix.

Well for development on the local, please setup the cors extention in browser. How to install the chrome extention

But the important thing is it should be solved on server-side.

Granting JavaScript clients basic access to your resources simply requires adding one HTTP Response Header, namely:

 Access-Control-Allow-Origin: *
 Access-Control-Allow-Origin: http://example.com:8080

At the HTTP Server level...

For Apache

Apache can be configured to expose this header using mod_headers. This is enabled by default in Apache, however you may want to ensure it's enabled in your deployment by running the following command:

 a2enmod headers

To expose the header, you can add the following line inside , , and sections, or within an .htaccess file.

 <IfModule mod_headers.c>
   Header set Access-Control-Allow-Origin "*"
 </IfModule>

You can use add rather than set, but be aware that add can add the header multiple times, so it's generally safer to use set.

Finally, you may need to reload Apache to make sure your changes have been applied.

For nginx

Merge this into the web.config file at the root of your application / site:

  <?xml version="1.0" encoding="utf-8"?>
  <configuration>
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Access-Control-Allow-Origin" value="*" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </configuration>

If you don't have a web.config file already, or don't know what one is, just create a new file called "web.config" containing the snippet above.

At the Web Application level...

In ASP.NET

Add the the following line to your source pages.

 Response.AppendHeader("Access-Control-Allow-Origin", "*");

This is compatible with IIS6, IIS7 Classic Mode, and IIS7 Integrated Mode.

With Python

  print "Content-Type: text/turtle"
  print "Content-Location: mydata.ttl"
  print "Access-Control-Allow-Origin: *"
  print

In PHP

Add the following line to your PHP scripts --

<?php
header("Access-Control-Allow-Origin: *");

In ExpressJS

In your ExpressJS app on nodejs, do the following with your routes

 app.all('/', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next()
  });

  app.get('/', function(req, res, next) {
    // Handle the get for this route
  });

  app.post('/', function(req, res, next) {
    // Handle the post for this route
  })

etc ...

Hope this article helps!!!