Access-Control-Allow-Origin 和 Angular.js $http

什么是 CORS?

CORS(Cross-Origin Resource Sharing,跨域资源共享)指的是在浏览器中,运行在一个源(协议 + 域名 + 端口)的脚本,请求另一个源上的资源时,会出现跨域问题。例如,从 http://example.com 的网页中使用 AJAX 请求 http://api.example.com/data.json

为了避免跨域安全问题,浏览器实现了 Same-Origin Policy(同源策略),限制页面只能与同一源中的资源进行交互。但是,在某些情况下,我们需要跨域访问资源,这就需要使用 CORS。

CORS 是由 W3C 提出的规范,通过在响应头中添加 Access-Control-Allow-Origin 等字段来告诉浏览器,哪些源可以访问该资源。

Access-Control-Allow-Origin

Access-Control-Allow-Origin 是响应头中用于设置可访问资源的源列表的字段。该字段的值可以是一个特定的源(例如 http://example.com),也可以是通配符 *,表示允许任意来源进行访问。

下面是一个设置允许所有来源访问的响应头示例:

-------- --- --
---------------------------- -

如果你想限制哪些来源可以访问资源,可以指定特定的源:

-------- --- --
---------------------------- ------------------

Angular.js $http

Angular.js 是一个流行的 JavaScript 前端框架,提供了丰富的工具和功能来帮助我们构建 Web 应用程序。其中包括 $http 服务,用于进行 AJAX 请求。

在使用 $http 发送跨域请求时,需要在后端添加 Access-Control-Allow-Origin 响应头,否则将无法成功获取到数据。

下面是一个在 Angular.js 中使用 $http 获取跨域资源的示例:

-------
    ------- ------
    ---- ----------------------------------
---------------- ------------------------- -
    ---------------------------
-- -------- ----------------------- -
    -------------------- ---------- ------- ---------------- ---------------------
---

如果后端没有正确配置 Access-Control-Allow-Origin 响应头,浏览器会显示以下错误:

-------------- ------ ---- --------------------------------- 
------ ------------------ -- --- ------- -- ----------------------------

总结

在开发 Web 应用程序时,遇到跨域请求问题是很常见的。通过使用 CORS 和设置 Access-Control-Allow-Origin 响应头字段,我们可以解决跨域安全问题。

在 Angular.js 中,使用 $http 服务发送跨域请求时,需要确保后端正确地配置了 Access-Control-Allow-Origin 响应头。否则,将无法成功获取到数据。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/29277