在前端开发中，跨域请求是经常会遇到的问题。因为浏览器有同源策略，不同域名、协议、端口之间的 JavaScript 脚本不能互相访问。这就意味着，如果在页面中嵌入其他域名的资源（如图片、视频、代码等），浏览器必须向其他域名发起请求。但跨域请求会带来一定的安全风险和性能问题，因此我们需要进行一些优化。
1. 避免跨域请求的方法
跨域请求可以通过以下几种方法避免：
1.1 JSONP
JSONP（JSON with padding）是一种跨域请求数据的方案。其原理是利用 script 标签可以跨域请求资源的特性，在请求时指定一个回调函数名，服务器返回的数据作为参数传入该回调函数中。由于 script 标签不受同源策略限制，因此可以实现跨域请求。
示例代码：
-- -------------------- ---- ------- -------- ---------- --------- - ----- ------ - --------------------------------- ----------- - ------------------ ---------- - ------------------------------ ---------------------------------- - -------------------------------- ----------- -------- ------------- - ------------------ -
1.2 CORS
CORS（Cross-Origin Resource Sharing）是一种跨域访问资源的标准，它通过在服务器端设置 HTTP 头部，允许某些跨域请求被访问。具体来说，服务器可以设置 Access-Control-Allow-Origin 头部指定允许跨域的源，也可以设置其他头部如 Access-Control-Allow-Methods、Access-Control-Allow-Headers 等。
示例代码：
fetch('http://example.com/data', {
method: 'GET',
mode: 'cors',
})
.then(response => response.json())
.then(data => console.log(data));1.3 代理
通过在本地部署中间代理服务器，将跨域请求转化为同源请求，再由代理服务器向远程服务器发起请求，最后将响应结果返回给客户端。这样可以避免跨域请求，但会增加服务器压力和网络延迟。
示例代码：
fetch('/api/data')
.then(response => response.json())
.then(data => console.log(data));2. 跨域请求的性能问题
虽然跨域请求可以通过上述方法避免，但在实际项目中，我们仍然需要经常处理跨域请求。因为跨域请求会导致增加网络延迟，降低响应速度，从而影响用户体验和搜索引擎排名。
为避免跨域请求导致的性能问题，我们可以采用以下两种方法：
2.1 减少跨域请求次数
可以将多个跨域请求合并为一个请求，从而减少网络请求次数。如将多个 CSS 或 JS 文件合并为一个，或者将多个 API 接口请求合并为一个。
另外，可以通过使用长连接（web socket）或轮询等技术建立与服务器的持久连接，从而减少跨域请求的频率。
2.2 缓存跨域请求结果
可以使用浏览器的缓存机制，缓存跨域请求结果，减少重复请求。通常使用 HTTP Cache-Control、ETag 或 Last-Modified 等 HTTP 头部进行缓存控制。
示例代码：
fetch('/api/data', {
cache: 'force-cache',
})
.then(response => response.json())
.then(data => console.log(data));3. 总结
在前端开发中，避免跨域请求是必须要注意的问题。可以采用 JSONP、CORS、代理等方法避免跨域请求，同时可以通过减少请求次数和缓存请求结果等方式优化跨域请求的性能。在实际开发中，需要结合具体项目需求和实现细节进行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647015ad968c7c53b0e3a6ba