如何在角度 5 中设置“Access-Control-Allow-Origin”？

Posted 2023-02-27

【中文标题】如何在角度 5 中设置“Access-Control-Allow-Origin”？

【英文标题】：How set "Access-Control-Allow-Origin" in angular 5?

【发布时间】：2019-03-14 04:50:09

【问题描述】：

我正在尝试从 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' 标头。”

【问题讨论】：

你应该在后端设置标题，不是前端，所以这与角度无关:)

@AJT_82 好的，感谢您的快速响应。

:) 没问题 :)

可能重复：***.com/questions/50607264/…; ***.com/questions/45527935/…; ***.com/questions/41683195/…

我使用“corsheaders”在后端处理它，它解决了我的问题。再次感谢@AJT_82。

【参考方案1】：

如果您使用 Spring 作为后端服务器。可以使用@CrossOrigin注解解决。

就像：

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

这个注解对于单个函数也很有用。

【讨论】：

感谢重播，但我在后端使用 django。

【参考方案2】：

您需要在 Web Api 中启用 CORS。全局启用 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>

【参考方案3】：

如果您使用 Spring Boot 作为后端，那么提供的解决方案可以添加

在我的情况下，您的 Controller 类上方的@CrossOrigin 正在工作。