Headless CMS 是一种将内容管理系统抽象为通用 API，将前端和后端的 CMS 逻辑剥离，拥有更大的灵活性和自由度。但是他也带来了一个问题，即跨域问题，为了处理 Headless CMS 的跨域问题，我们有以下几个技巧。
使用代理
代理是最常见的处理跨域的方法，就是本地的请求地址与服务器不一致，可以通过代理在中间进行转发，绕过浏览器的跨域限制。通常我们把请求发送到本地代理服务器，然后由本地代理服务器把请求转发到真正的 CMS 服务器上。这样我们可以在本地跑一个代理服务器，来解决跨域问题，比如使用 http-proxy-middleware。
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
app.use('/api', createProxyMiddleware({ target: 'http://headless-cms.com', changeOrigin: true }));使用 CORS
CORS 是一种跨域资源分享的机制，通过在服务器端设置 HTTP 头让浏览器与服务器进行沟通来解决跨域问题。使用 CORS 要注意几个问题：
服务端需要设置 Access-Control-Allow-Origin、Access-Control-Allow-Methods 以及 Access-Control-Allow-Headers。
在请求数据的时候需要在 header 中添加 Origin 字段（也可不添加），否则服务器无法识别。
在响应数据的时候需要在 header 中添加一下字段：
Access-Control-Allow-Origin：添加允许访问的域名地址
Access-Control-Allow-Credentials：如果带上 cookie，需要设置为 true。
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
res.header('Access-Control-Allow-Credentials', true);
next();
});使用 JSONP
JSONP 则适用于只需要从远端服务端获取数据，不需要进行修改或提交的前端请求。JSONP 原理简单，是通过动态添加 script 标签来获取远程数据（因为 script 标签是没有跨域限制的）。服务端返回的数据以 callback 函数的方式载入，就可以在远端的页面中调用这个函数了。使用 JSONP 时，需要注意点：
JSONP 数组的序列化不能出错，否则页面就挂了。
无法把 POST 请求转化为 GET 请求。
// www.javascriptcn.com code example
function jsonp(url, jsonpCallback, success) {
const script = document.createElement('script');
script.src = url;
script.async = true;
script.type = 'text/javascript';
window[jsonpCallback] = function(data) {
success && success(data);
document.body.removeChild(script);
}
document.body.appendChild(script);
}使用消息机制
Window.postMessage() 方法可以使我们在不同的 window/tab 之间进行消息传递。这种方法的实现原理是在头文件中添加两个特殊消息字段，然后通过 targetWindow.postMessage(message, targetOrigin); 将消息传递给 targetWindow。接收消息的事件为服务器端实现，为 onmessage。
但是，这种方法只适用于 HTML5 支持的浏览器，且传递的数据有大小限制。
window.onmessage = function(event) {
if (event.origin !== cmsServer)
return;
const message = JSON.parse(event.data);
console.log(message);
}综上，以上四种技巧都可以在解决 Headless CMS 的跨域问题上提供帮助。使用不同的技巧，并结合具体业务需求，可以在合适的场景中得到很好的使用效果，提升开发的效率，增强编码技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d7f896a941bf7134e3d076