Question

我在前端使用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: *');进行了尝试，但是遇到了同样的错误。

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

Answer 1

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

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

当然，您还可以通过应用程序设置CORS响应标头，但是对于开发和生产，所需的值将有所不同。还要注意，'Access-Control-Allow-Origin：*'绝对不能在生产中使用，因为它基本上会禁用CORS保护。请注意，如果您处理的是CORS，则必须处理可能会更改服务器状态（如POST，PUT，DELETE等）的强制性OPTIONS请求。

Answer 2

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

本地主机上的'Access-Control-Allow-Origin'

2 个答案: