什么是跨域？
在前端开发中，常常会遇到通过 AJAX 请求获取数据的情况。但是，当请求的地址与当前页面的地址不相同时，就出现了跨域问题。
跨域是指当前页面通过 AJAX 请求获取不同域名下的数据时，浏览器会因为安全原因拒绝该请求，这种情况下，后台服务器接收到请求后会返回一个跨域错误，并且前端无法获取到数据。
如何解决跨域问题？
一、使用 JSONP
JSONP（JSON with Padding），是一种解决跨域的方式，它通过动态创建 <script> 标签来实现跨域请求数据。
JSONP 的原理是前端把回调函数名称和需要获取的数据作为参数，发送到服务端，在服务端返回数据时，包裹一层回调函数，将结果写在参数中一起返回到前端，前端通过回调函数接收、处理返回的数据。
JSONP 的缺点是只能发 GET 请求，无法支持 POST 请求。
示例代码：
-------- ------------- --------- -
----- ------------ - ----------------- - ------------------------------------ ---
-------------------- - -------- ------ -
------ ---------------------
----------------------------------
---------------
--
----- ------ - ---------------------------------
---------- - --- - ----------------- -- - - --- - ---- - ----------- - -------------
----------------------------------
-
------------------------------------ -------- ------ -
------------------
---二、CORS（跨域资源共享）
CORS 是 W3C 标准，全称是 Cross-Origin Resource Sharing，是跨域解决方案中优先推荐的方案。通过在响应头里面添加 Access-Control-Allow-Origin 标明允许跨域请求的源，从而允许客户端跨域请求资源。
在前端代码里，需要使用标准的 AJAX 请求，并且需要在请求头中携带一个 Origin 字段，表示请求的来源域名。
示例代码：
----- --- - --- -----------------
------------------- - -----
--------------- --------------------------- ------
------------------------------------ ----------------------------------- ----------------
------------------------------ -------------------------
---------------------- - -------- -- -
-- --------------- --- - -- ---------- --- ---- -
------------------------------
-
--
---------------三、使用 AngularJS 常用方法 $http
除上述两种方式外，开发人员还可以使用 AngularJS 提供的 $http 服务来解决跨域问题。
$http 是 Angular 的一个重要组件，它通过 XMLHttpRequest 或者 JSONP 实现常见的 CRUD 操作，并且提供了一些常用的配置项，例如请求方法、请求头、请求参数、超时时间等。
示例代码：
----------------------- ------------------------ -------- -------- ------ -
-------
------- ------
---- ---------------------------
-------- -
--------------- ----------------------------------- ---------------
--------- -----------------------
--
---------------- ----
---------------- ------------------------- -
---------------------------
-- -------- ----------------------- -
-----------------------------
---
---在调用 $http 方法时，需要设置 withCredentials 为 true，以启用跨域请求。同时，在请求头中也需要携带 Origin 字段。
总结
以上是解决跨域问题的三种方式，其中 JSONP 和 CORS 是前端工程师比较熟悉的，而 $http 是 AngularJS 框架提供的一种常用方案。
在使用 $http 进行跨域请求时，需要注意设置 withCredentials 和请求头中的 Origin 字段，否则无法成功跨域请求。同时，跨域请求也需要合理使用，并且严格验证数据的来源，以保障网站的安全性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653dcba27d4982a6eb77a54a