RESTful API 如何跨域访问？
近年来，随着前端技术的迅速发展，利用 JavaScript 操作 API 的方式愈来愈流行，而 RESTful API 相对于传统的 API 更为灵活，因此也越来越受到广泛认可。然而，在实际的开发过程中，我们经常会遇到跨域问题，本文将介绍 RESTful API 如何跨域访问，并提供具体的实现方案。
什么是跨域？
在前后端分离的开发过程中，前端代码和后端数据往往会存在不同的域名或端口，这种情况下，浏览器会认为这些数据来自不同的源，就会引发跨域问题。因为浏览器出于安全考虑，禁止异域间的数据访问，防止一些不良人员利用 JavaScript 做出跨站脚本攻击等行为。
实现跨域的方法
- JSONP
JSONP 的原理是利用 script 标签的 src 属性没有跨域限制这一特性，实现跨域访问。具体实现如下：
服务端代码：
const app = express();
app.get('/api', (req, res) => {
const callback = req.query.callback;
const data = {a: 1, b: 2};
res.send(`${callback}(${JSON.stringify(data)})`);
});前端代码：
-- -------------------- ---- ------- -------- ---------- -------------- - ----- ------ - --------------------------------- ---------- - ----------------------------------- ---------------------------------- ---------------------------------- - ---------------------------------- ----------- -------------- - ------------------ ---
- CORS
CORS 是 Cross-Origin Resource Sharing 的简称，其通过在服务器端设置响应头来实现跨域访问的。在服务端代码中设置响应头即可，具体实现如下：
-- -------------------- ---- ------- ----- --- - ---------- ------------- ---- ----- -- - -------------------------------------------- ----- --------------------------------------------- ----- ----- ---------- --------------------------------------------- ---------------- ------- --- --------------- ----- ---- -- - ----- ---- - --- -- -- --- --------------- ---
前端代码：
fetch('http://localhost:3000/api')
.then(res => res.json())
.then(data => console.log(data));- 代理转发
由于服务器端没有跨域问题，因此可以使用服务器端作为代理，将请求转发到目标服务器进行处理，然后将数据返回给前端。具体实现如下：
服务端代码：
-- -------------------- ---- -------
----- --- - ----------
----- ----- - -----------------
--------------- ----- ---- -- -
--------------------------------------
-------------- -- -
------------------------
---
---前端代码：
fetch('http://localhost:3000/api')
.then(res => res.json())
.then(data => console.log(data));总结
虽然每种实现方案都有其优劣点，但是在实际开发中，推荐使用 CORS 实现跨域访问。因为它不需要前端开发者进行任何特殊的实现，也不涉及服务器端的特殊设置，相对较为简单、方便、安全。当然，具体实现方案还需根据项目自身情况进行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475cb15968c7c53b02cc470