在使用AngularJS进行开发时，您可能会遇到这个错误：“Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https”。这个错误通常发生在您正在试图从另一个域名或端口请求数据时。这篇文章将详细介绍这个错误的原因，以及如何解决它。
为什么会出现这个错误？
这个错误是由于浏览器的“同源策略”引起的。该策略限制了来自其他源的资源的访问，并确保只有来自相同源的脚本才能访问彼此。这是出于安全考虑的，以防止恶意脚本能够盗取信息或进行其他攻击。
例如，如果您的网站运行在http://example.com上，那么您只能从http://example.com上请求数据。如果您试图从http://example.net请求数据，则会出现错误，即使两个网站都属于您。
如何解决这个错误？
有几种方法可以解决这个错误。
1. JSONP（JSON with Padding）
JSONP允许您通过添加一个回调函数名称来请求跨域资源。该回调函数将在成功获取数据后被调用，从而允许您处理响应。
$http.jsonp('http://example.net/data.json?callback=JSON_CALLBACK')
.success(function(data) {
// 处理响应数据
})
.error(function(error) {
// 处理错误
});请注意，在服务器端，您需要将响应包装在回调函数名称中：
JSON_CALLBACK({"name": "John", "age": 30})2. CORS（Cross-Origin Resource Sharing）
CORS允许服务器指定哪些域名或IP地址可以访问资源。要启用CORS，您需要在服务器上设置响应头。
Access-Control-Allow-Origin: http://example.com
这将允许http://example.com从服务器请求资源。如果想允许所有域名访问资源，可以将值设置为*。
Access-Control-Allow-Origin: *
3. 代理
使用代理服务器是一种常见的方法来解决跨域问题。通过在您的服务器上创建一个中间层来转发请求，代理服务器会绕过浏览器的同源策略。
$http.get('/api/data')
.success(function(data) {
// 处理响应数据
})
.error(function(error) {
// 处理错误
});在您的服务器上，您需要将/api/data代理到目标地址：
app.use('/api', proxy('http://example.net'));示例代码
下面是一个使用CORS进行跨域请求的示例代码：
-- -------------------- ---- -------
-------
------- ------
---- -------------------------------
-------- -
------------------------------ --------------------
-
--
----------------------- -
-- ------
--
---------------------- -
-- ----
---结论
在AngularJS开发中遇到“Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https”错误是常见的。要解决这个错误，您可以使用JSONP、CORS或代理来绕过浏览器的同源策略。选择哪种方法取决于您的应用程序的需求和服务器的配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25107