在前端开发中，跨域请求是很常见的。如果不处理好，可能会导致一些问题，如请求被浏览器拒绝或请求失败。在 TypeScript 中，可以使用一些方法来处理跨域请求。
什么是跨域请求？
跨域请求是指在同一个网站下，从一个域名请求另一个域名的资源，或从一个端口、协议、子域名请求另一个端口、协议、子域名的资源。
例如，在 http://www.example.com 下，从 http://api.example.com 请求数据，就是一个跨域请求。因为这两个域名不同。
如何处理跨域请求？
1. 代理请求
代理请求是指在本地服务器上发送一个请求，并将该请求转发给另一个服务器。前端可以向本地服务器发送请求，而不是直接向目标服务器发送请求。这样可以避免跨域请求的限制。
下面是一个使用 Node.js 的示例代码：
-- -------------------- ---- -------
----- ------- - ------------------
----- ------- - ------------------
----- --- - ---------
-------------------- ----- ---- -- -
----- --- - -----------------------------
--------------------------------
--
---------------- -- -- -
------------------- -- ------- -- ---- ------
--这段代码启动了一个本地服务器，监听了 3000 端口。当访问 localhost:3000/api/data 时，服务器将请求转发给 http://api.example.com/data，并将结果返回给前端。
2. CORS
CORS 是一种跨域资源共享的技术。CORS 允许浏览器向跨域服务器发送 AJAX 请求，从而解决了跨域请求的限制。
在 TypeScript 中，使用 CORS 可以很方便地处理跨域请求。下面是一段使用 CORS 的代码示例：
import axios from 'axios'
const corsUrl = 'https://cors-anywhere.herokuapp.com/'
const apiUrl = 'http://api.example.com/data'
axios.get(corsUrl + apiUrl).then(response => {
console.log(response.data)
})这里使用了 https://cors-anywhere.herokuapp.com/ 作为跨域请求中转站，首先将请求发送给该站点，再由该站点将请求发送给目标服务器。这样就可以绕过跨域请求的限制了。
3. JSONP
JSONP 是一种利用标签的跨域技术。JSONP 返回的数据是一段 JSON 字符串，该字符串被包含在一个 JavaScript 函数调用中返回。在 TypeScript 中，可以使用 JSONP 处理跨域请求。
下面是一个使用 JSONP 的代码示例：
-- -------------------- ---- -------
-------- ---------- --------- -
----- ------ - --------------------------------
---------- - --- - ------------ - --------
---------------------------------
-
------------------------------------ -----------
-------- -------------- -
-----------------
-这里通过一个自定义的 jsonp 函数，设置请求的 URL 和回调函数名。在异步请求的响应中，返回的数据会执行回调函数 callback。
总结
本文介绍了 TypeScript 中如何处理跨域请求。通过代理请求、CORS 和 JSONP 技术，可以有效地解决跨域请求的限制。无论使用哪种方法，都需要仔细地考虑应用场景和安全性，以便更好地处理跨域请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64812d4948841e98940982a9