什么是 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），也可以是通配符 *，表示允许任意来源进行访问。
下面是一个设置允许所有来源访问的响应头示例：
HTTP/1.1 200 OK Access-Control-Allow-Origin: *
如果你想限制哪些来源可以访问资源，可以指定特定的源：
HTTP/1.1 200 OK Access-Control-Allow-Origin: http://example.com
Angular.js $http
Angular.js 是一个流行的 JavaScript 前端框架，提供了丰富的工具和功能来帮助我们构建 Web 应用程序。其中包括 $http 服务，用于进行 AJAX 请求。
在使用 $http 发送跨域请求时，需要在后端添加 Access-Control-Allow-Origin 响应头，否则将无法成功获取到数据。
下面是一个在 Angular.js 中使用 $http 获取跨域资源的示例：
$http({
method: 'GET',
url: 'http://api.example.com/data.json'
}).then(function successCallback(response) {
console.log(response.data);
}, function errorCallback(response) {
console.error('Error retrieving data:', response.status, response.statusText);
});如果后端没有正确配置 Access-Control-Allow-Origin 响应头，浏览器会显示以下错误：
XMLHttpRequest cannot load http://api.example.com/data.json. Origin http://example.com is not allowed by Access-Control-Allow-Origin.
总结
在开发 Web 应用程序时，遇到跨域请求问题是很常见的。通过使用 CORS 和设置 Access-Control-Allow-Origin 响应头字段，我们可以解决跨域安全问题。
在 Angular.js 中，使用 $http 服务发送跨域请求时，需要确保后端正确地配置了 Access-Control-Allow-Origin 响应头。否则，将无法成功获取到数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29277