Как установить Access-Control-Allow-Origin в angular 5?

Я пытаюсь получить запрос от angular 5, как показано ниже:

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);
      });
    }

но это дает мне ошибку, поскольку «Ответ на предварительный запрос не проходит проверку контроля доступа: в запрошенном ресурсе нет заголовка« Access-Control-Allow-Origin »».


http angular preflight
person Naresh Pawar    schedule 09.10.2018    source источник
comment
Вы должны установить заголовок в бэкэнде, не в интерфейсе, так что это не имеет ничего общего с угловым :)   -  person AJT82    schedule 09.10.2018
comment
@ AJT_82 хорошо, спасибо за быстрый ответ.   -  person Naresh Pawar    schedule 09.10.2018
comment
:) Без проблем :)   -  person AJT82    schedule 09.10.2018
comment
Возможный дубликат: stackoverflow.com/questions/50607264/; stackoverflow.com/questions/45527935/; stackoverflow.com/ вопросы/41683195/   -  person Learning    schedule 09.10.2018
comment
Я обрабатываю это в бэкэнде, используя corsheaders, и это решило мою проблему. Еще раз спасибо @AJT_82.   -  person Naresh Pawar    schedule 09.10.2018

Ответы (3)


arrow_upward
1
arrow_downward

Вам нужно включить CORS в вашем веб-API. Более простой и предпочтительный способ включить CORS глобально — добавить в 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>
person Z.ain    schedule 09.10.2018

arrow_upward
0
arrow_downward

Если вы используете Spring в качестве внутреннего сервера. Вы можете использовать аннотацию @CrossOrigin, чтобы решить эту проблему.

Как:

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

Эта аннотация также полезна для одной функции.

person Xu Duan    schedule 09.10.2018
comment
спасибо за повтор, но я использую django в бэкэнде. - person Naresh Pawar; 09.10.2018

arrow_upward
-1
arrow_downward

Если вы используете Spring Boot в качестве серверной части, то решение, которое предоставляется для добавления

@CrossOrigin чуть выше вашего класса Controller работает в моем случае.

person sandeepnegi1996    schedule 27.01.2020