How to add CORS request in header in Angular 5

Question

I have added the CORS in header but I am still getting the CORS issue in my request  What is the correct way to add and handle CORS and other requests in the headers   Here is service file code   import   HttpClient  HttpHeaders  HttpClientModule   from   angular common http   const httpOptions       headers  new HttpHeaders         Access-Control-Allow-Origin            Authorization   authkey        userid   1           public baseurl    http   localhost XXXXXX    userAPI data   Observable lt any gt      return this http post this baseurl  data  httpOptions       pipe        tap  result    gt  console log  result-- gt   result          catchError this handleError  error                   Error      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      failed  Http failure response for  unknown url   0 Unknown Error   In my server-side code  I ve added CORS in the index file   header  Access-Control-Allow-Origin       header  Access-Control-Allow-Methods  GET  POST  PATCH  PUT  DELETE  OPTIONS    header  Access-Control-Allow-Headers  Origin  Content-Type  X-Auth-Token

User · Answer

In my experience the plugins worked with HTTP but not with the latest httpClient. Also, configuring the CORS response headers on the server wasn't really an option. So, I created a proxy.conf.json file to act as a proxy server.

Read more about this here.

proxy.conf.json file:

{
  "/posts": {
    "target": "https://example.com",
    "secure": true,
    "pathRewrite": {
    "^/posts": ""
  },
    "changeOrigin": true
  }
}

I placed the proxy.conf.json file right next the the package.json file in the same directory.

Then I modified the start command in the package.json file:

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

The HTTP call from my app component:

return this._http.get('/posts/pictures?method=GetPictures')
.subscribe((returnedStuff) => {
  console.log(returnedStuff);
});

Lastly to run my app, I'd have to use npm start or ng serve --proxy-config proxy.conf.json

User · Answer

If you are like me and you are using a local SMS Gateway server and you make a GET request to an IP like 192 168 0 xx you will get for sure CORS error    Unfortunately I could not find an Angular solution  but with the help of a previous replay I got my solution and I am posting an updated version for Angular 7 8 9  import  from  from  rxjs    getData    Observable lt any gt        return from        fetch           http   xxxxx      the url you are trying to access                     headers                 Content-Type    application json                          method   GET      GET  POST  PUT  DELETE           mode   no-cors     the most important option                           Just  subscribe like the usual

User · Answer

The following worked for me after hours of trying         http post  http   localhost 8080 yourresource   parameter   headers           Content-Type    application json    Access-Control-Allow-Origin               However following code did not work  I am unclear as to why  hopefully someone can improve this answer              http     method   POST   url   http   localhost 8080 yourresource                        parameter                       headers    Content-Type    application json                                   Access-Control-Allow-Origin                                       Access-Control-Allow-Methods    POST

User · Answer

You can also try the fetch function and the no-cors mode  I sometimes find it easier to configure it than Angular s built-in http module  You can right-click requests in the Chrome Dev tools network tab and copy them in the fetch syntax  which is great   import   from   from  rxjs            result   from     wrap the fetch in a from if you need an rxjs Observable   fetch      this baseurl              body  JSON stringify data        headers             Content-Type    application json                  method   POST         mode   no-cors

User · Answer

Make the header looks like this for HttpClient in NG5   let httpOptions           headers  new HttpHeaders            Content-Type    application json            apikey   this apikey           appkey   this appkey                  params  new HttpParams   set  program id   this program id           You will be able to make api call with your localhost url  it works for me       Please never forget your params columnd in the header  such as params  new HttpParams   set  program id   this program id

User · Answer

A POST with httpClient in Angular 6 was also doing an OPTIONS request   Headers General    Request URL https   hp-probook perl-bin muziek pl   postData Request Method OPTIONS Status Code 200 OK Remote Address 127 0 0 1 443 Referrer Policy no-referrer-when-downgrade   My Perl REST server implements the OPTIONS request with return code 200   The next POST request Header    Accept     Accept-Encoding gzip  deflate  br Accept-Language nl-NL nl q 0 8 en-US q 0 6 en q 0 4 Access-Control-Request-Headers content-type Access-Control-Request-Method POST Connection keep-alive Host hp-probook Origin http   localhost 4200 Referer http   localhost 4200  User-Agent Mozilla 5 0  X11  Linux x86 64  AppleWebKit 537 36  KHTML  like Gecko  Chrome 59 0 3071 109 Safari 537 36   Notice Access-Control-Request-Headers content-type    So  my backend perl script uses the following headers      - Access-Control-Allow-Origin           - Access-Control-Allow-Methods      GET POST PATCH DELETE PUT OPTIONS    - Access-Control-Allow-Headers      Origin  Content-Type  X-Auth-Token  content-type     With this setup the GET and POST worked for me

User · Answer

please import requestoptions from angular cors      import   RequestOptions   Request   Headers     from    angular http     and add request options in your code like given below      let  requestOptions     new  RequestOptions   headers null  withCredentials       true       send request option in your api request  code snippet below-       let  requestOptions     new  RequestOptions   headers null        withCredentials  true          return this http get this config baseUrl         this config getDropDownListForProject  requestOptions        map res   gt                if res    null                   return res json              return true                    catch this handleError            and add CORS in your backend PHP code where all api request will land first   try this and let me know if it is working or not i had a same issue i was adding CORS from angular5 that was not working then i added CORS to backend and it worked for me

[angular] How to add CORS request in header in Angular 5

Examples related to angular

Examples related to angular5