本地主机上的“访问控制允许来源”答案

【问题标题】：'Access-Control-Allow-Origin' on localhost本地主机上的“访问控制允许来源”
【发布时间】：2019-10-22 18:23:40
【问题描述】：

我使用 Angular 作为前端，使用 Symfony 作为后端。

这是我尝试从后端获取数据的方式：

getTechnologies(): Observable<Itechnologies[]> {
  return this.http.get<Itechnologies[]>('http://localhost/technologies');
}

这是尝试从后端发送数据的方法：

public function getTechnologies(Request $request) {
    $technologies = $this->technologyService->getTechnologies($request->getContent());
    return new Response(json_encode($technologies));
}

这是我得到的：

从 'http://localhost/technologies' 访问 XMLHttpRequest 来源“http://localhost:4200”已被 CORS 策略阻止：否请求中存在“Access-Control-Allow-Origin”标头资源。

我也用header('Access-Control-Allow-Origin: *'); 尝试过，但我得到了同样的错误。

如果它们都在本地主机上，为什么我会收到此错误？

【问题讨论】：

标签： angular symfony http-headers

【解决方案1】：

端口是源的一部分，这就是在此处检测到 CORS 的原因。要为本地开发处理此问题，您有两种选择：

使用设置 CORS 标头的浏览器插件（请仅用于本地开发设置）。
使用在同一端口上同时提供（前端和后端）的本地代理（请参阅here）。

当然，您也可以通过应用程序设置 CORS 响应标头，但所需的值会因开发和生产而异。另请注意，永远不要在生产中使用“Access-Control-Allow-Origin: *”，因为它基本上会禁用 CORS 保护。请注意，如果您处理 CORS，则必须处理可能会更改服务器状态（如 POST、PUT、DELETE 等）的请求的强制性 OPTIONS 请求。

【讨论】：

【解决方案2】：

您还可以查看此捆绑包：https://github.com/nelmio/NelmioCorsBundle 用于您的后端，并在您的开发依赖项中使用它。

【讨论】：