什么是跨域？
在前端开发中，常常会遇到通过 AJAX 请求获取数据的情况。但是，当请求的地址与当前页面的地址不相同时，就出现了跨域问题。
跨域是指当前页面通过 AJAX 请求获取不同域名下的数据时，浏览器会因为安全原因拒绝该请求，这种情况下，后台服务器接收到请求后会返回一个跨域错误，并且前端无法获取到数据。
如何解决跨域问题？
一、使用 JSONP
JSONP（JSON with Padding），是一种解决跨域的方式，它通过动态创建 <script> 标签来实现跨域请求数据。
JSONP 的原理是前端把回调函数名称和需要获取的数据作为参数，发送到服务端，在服务端返回数据时，包裹一层回调函数，将结果写在参数中一起返回到前端，前端通过回调函数接收、处理返回的数据。
JSONP 的缺点是只能发 GET 请求，无法支持 POST 请求。
示例代码：
// javascriptcn.com 代码示例
function getJSONP(url, callback) {
const callbackName = 'jsonp_callback_' + Math.random().toString(36).substr(2, 5);
window[callbackName] = function (data) {
delete window[callbackName];
document.body.removeChild(script);
callback(data);
};
const script = document.createElement('script');
script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
document.body.appendChild(script);
}
getJSONP('https://example.com/data', function (data) {
console.log(data);
});二、CORS（跨域资源共享）
CORS 是 W3C 标准，全称是 Cross-Origin Resource Sharing，是跨域解决方案中优先推荐的方案。通过在响应头里面添加 Access-Control-Allow-Origin 标明允许跨域请求的源，从而允许客户端跨域请求资源。
在前端代码里，需要使用标准的 AJAX 请求，并且需要在请求头中携带一个 Origin 字段，表示请求的来源域名。
示例代码：
// javascriptcn.com 代码示例
const xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open("GET", "https://example.com/data", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xhr.setRequestHeader("Origin", "http://localhost:8080");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(null);三、使用 AngularJS 常用方法 $http
除上述两种方式外，开发人员还可以使用 AngularJS 提供的 $http 服务来解决跨域问题。
$http 是 Angular 的一个重要组件，它通过 XMLHttpRequest 或者 JSONP 实现常见的 CRUD 操作，并且提供了一些常用的配置项，例如请求方法、请求头、请求参数、超时时间等。
示例代码：
// javascriptcn.com 代码示例
angular.module('myApp', []).controller('myCtrl', function ($scope, $http) {
$http({
method: 'GET',
url: 'https://example.com/data',
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
'Origin': 'http://localhost:8080'
},
withCredentials: true
}).then(function successCallback(response) {
console.log(response.data);
}, function errorCallback(response) {
console.log(response.status);
});
});在调用 $http 方法时，需要设置 withCredentials 为 true，以启用跨域请求。同时，在请求头中也需要携带 Origin 字段。
总结
以上是解决跨域问题的三种方式，其中 JSONP 和 CORS 是前端工程师比较熟悉的，而 $http 是 AngularJS 框架提供的一种常用方案。
在使用 $http 进行跨域请求时，需要注意设置 withCredentials 和请求头中的 Origin 字段，否则无法成功跨域请求。同时，跨域请求也需要合理使用，并且严格验证数据的来源，以保障网站的安全性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653dcba27d4982a6eb77a54a