在使用AngularJS进行前端开发时，有时候会遇到"No 'Access-Control-Allow-Origin' header is present on the requested resource"的错误提示。这个错误通常是由于浏览器的安全机制导致的，因为浏览器不允许跨域请求资源。
什么是跨域请求？
跨域请求是指在一个域名下请求另外一个域名的资源，即浏览器从一个源网站向另一个源网站发送API请求。例如，在http://www.example.com网站上的JavaScript代码请求http://www.anotherexample.com/data.json数据文件。
解决方法
后端解决
通常来说，最好的解决方法是通过后端技术来解决跨域问题。我们可以在后端设置HTTP响应头，添加"CORS（Cross-Origin Resource Sharing）"信息，以允许特定的域名或者所有域名来访问资源。例如，如果我们使用Node.js和Express框架，我们可以在服务器端添加以下代码：
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});这样就可以允许所有域名来访问资源了。如果你只想允许特定的域名来访问资源，可以将*替换成相应的域名。
前端解决
如果我们无法修改后端代码，则我们可以在前端使用JSONP（JSON with Padding）或CORS解决跨域问题。但是，这些方法并不适用于所有情况，因为它们具有一定的限制和安全风险。
JSONP
JSONP允许我们通过动态生成一个<script>标签来请求跨域资源。这个标签可以包含一个回调函数，在服务器返回数据时被调用。例如：
var script = document.createElement('script');
script.src = 'http://www.anotherexample.com/data.json?callback=handleData';
document.body.appendChild(script);
function handleData(data) {
console.log(data);
}这里我们定义了一个名为handleData()的回调函数，当数据返回时会自动调用它。注意，服务器返回的数据必须被包装在回调函数中，例如：
handleData({"name":"John","age":30,"city":"New York"});CORS
CORS是一种通用的解决跨域问题的方法，它通过在HTTP头部添加一些特殊的信息来告诉浏览器服务器愿意接受哪些源网站的请求。与JSONP不同，CORS支持所有的HTTP请求类型。在AngularJS中，我们可以通过设置$httpProvider.defaults.useXDomain和$httpProvider.defaults.withCredentials为true来启用CORS。
$httpProvider.defaults.useXDomain = true; delete $httpProvider.defaults.headers.common['X-Requested-With']; $httpProvider.defaults.withCredentials = true;
这里我们将useXDomain设置为true，表示启用CORS；将withCredentials设置为true，表示允许跨域请求携带身份验证信息（例如cookies）。需要注意的是，启用CORS会使得浏览器发送两次请求，一次是预检请求（OPTIONS），另一次才是真正的请求，因此服务器必须能够处理OPTIONS请求。
总结
"No 'Access-Control-Allow-Origin' header is present on the requested resource"错误提示通常是由于浏览器的安全机制导致的，因为浏览器不允许跨域请求资源。我们可以通过后端设置HTTP响应头，添加"CORS"信息来解决跨域问题。如果无
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29945