how to avoid CORS policy error in angular PUT method

Question

I am trying todo PUT method in Angular,

app.component.ts:

this.http.put( this.updateurl+ this.userid, JSON.stringify(user.value))
.subscribe(response =>{
  console.log(response);
});

when I do this I am getting error like :

   Access to XMLHttpRequest at 'http:// ***********' from origin 'http://localhost:4200' has been 
   blocked by CORS policy: Method PUT is not allowed by Access-Control-Allow-Methods in preflight 
   response.

how can I solve this.

what is your server-side technology? cors policy can be added on the server-side, not in the angular side. — Akash Kumar, Jan 28 '20 at 06:49
you should enable cors(cross origin resource sharing) in your server side. You can enable it for specific urls and all urls. — Issac Johnson, Jan 28 '20 at 06:54
please read [this](https://sanderstechnology.net/2014/getting-to-know-cross-origin-resource-sharing-cors/13423/#.Xi_bZmgzbQo) — mojtaba ramezani, Jan 28 '20 at 06:58

score 0 · Answer 1 · answered Jan 28 '20 at 07:00

0

If you are going to access a public API, you need to configure an angular proxy into your application. Refer this: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

answered Jan 28 '20 at 07:00

Kushan Sameera

169
1
1
9

It's a CORE issue, recommending to setup a proxy to get around? – Vega Jan 28 '20 at 07:10
If you are going to access a public API, this will be the solution. If not you can allow it in the back-end – Kushan Sameera Jan 28 '20 at 07:22

score 0 · Answer 2 · answered Jan 28 '20 at 07:16

No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

This is because of the Same Origin Policy – it says that every AJAX request must match the exact host, protocol, and port of your site.

How to fix it:

Simply just provide access to all the host, protocol, and port by using *.

Modify the server to add the header Access-Control-Allow-Origin: * to enable cross-origin requests from anywhere (or specify a domain instead of *). This should solve your problem.

In you projects web.xml add the following filter

<filter>
   <filter-name>CorsFilter</filter-name>
   <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>

    <init-param>
        <param-name>cors.allowed.origins</param-name>        
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>GET, POST, PUT, DELETE, OPTIONS, HEAD</param-value>
    </init-param>  
</filter>

Now for limiting the access to only specific host, protocol, or port you can use the following param-value

<filter>
   <filter-name>CorsFilter</filter-name>
   <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>

    <init-param>
        <param-name>cors.allowed.origins</param-name>        
        <!-- <param-value>*</param-value> -->
        <param-value>http://localhost:4000,https://myapp.com</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>GET, POST, PUT, DELETE, OPTIONS, HEAD</param-value>
    </init-param>  
</filter>

Now here is this case only the requests from the following urls will be allowed while other will throw a CORS error even if they have a slight change in host, protocol, or port

http://localhost:4000 and https://myapp.com

FYI in above

http , https --> protocols
localhost , myapp -> hosts
4000 --> port

how to avoid CORS policy error in angular PUT method

2 Answers2