什么是 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