How set "Access-Control-Allow-Origin" in angular 5?

Question

I am trying to do get request from angular 5 as below:

public showHeatMap(){
        console.log("in showHeatMap")
        let headers = new Headers();
        headers.append('Access-Control-Allow-Origin' , '*');
/*      
        headers: new HttpHeaders({
            'Content-Type':  'image/png',
            'Access-Control-Allow-Origin': '*'
        }) */
        this.http.get(this.showHeatMapURL,{headers: headers}).toPromise().then((res)=>{
            console.log("reading response....")
            console.log(res);
      });
    }

but it gives me error as "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."

You should set the header in backend, not frontend, so this has really nothing to do with angular :) — AVJT82
– AVJT82, Commented Oct 9, 2018 at 11:56
Possible duplicate: stackoverflow.com/questions/50607264/…; stackoverflow.com/questions/45527935/…; stackoverflow.com/questions/41683195/… — Learning
– Learning, Commented Oct 9, 2018 at 12:09
I handle it in backend using "corsheaders" and it solved my problem. Thanks again @AJT_82. — Naresh Pawar
– Naresh Pawar, Commented Oct 9, 2018 at 12:30

Z.ain · Accepted Answer · 2018-10-09 12:15:18Z

1

You need to enable CORS in your Web Api. The easier and preferred way to enable CORS globally is to add the following into web.config

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Headers" value="Content-Type" />
      <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

answered Oct 9, 2018 at 12:15

Z.ain

112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Atul Over a year ago

Question is about Angular. Where is web.config in Angular?

Xu Duan · Accepted Answer · 2018-10-09 12:05:44Z

0

If you use Spring as your backend server. You can use @CrossOrigin annotation to solve it.

Just like:

@CrossOrigin
@RestController
public class DemoController {
    @GetMapping("/getHeatMap") 
    public Object getHeatMap() {
    ...
    }
}

This annotaion is also useful to single function.

answered Oct 9, 2018 at 12:05

Xu Duan

11 bronze badge

1 Comment

Naresh Pawar Over a year ago

thanks for replay, but I am using django in backend.

sandeepnegi1996 · Accepted Answer · 2020-01-27 11:00:09Z

-1

If you are using Spring Boot as your backend then the solution which is provided to add

@CrossOrigin just above your Controller class is working in my case.

answered Jan 27, 2020 at 11:00

sandeepnegi1996

259 bronze badges

Collectives™ on Stack Overflow

How set "Access-Control-Allow-Origin" in angular 5?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related