背景
在 Web 应用程序中，客户端 JavaScript 的一个限制是它只能访问同一源（相同的协议、主机名和端口）提供的资源。这个限制被称为同源策略。但当我们需要跨域访问其他服务器的资源时，就需要考虑如何绕开这个限制。
解决方法
一般来说，跨域访问可以通过以下几种方法来解决：
代理服务器：利用服务器端进行中转，通过客户端访问服务器，服务器再代为访问其他源，返回结果到客户端。这种方法比较简单，但有时需要搭建专门的代理服务器。
JSONP：利用
<script>标签的跨域特性，让服务端返回一段 JavaScript，该 JavaScript 内部调用客户端的一个回调函数。这种方法只支持 GET 请求，而且需要服务端支持。CORS：在服务端进行相应的配置，让客户端在发送请求时带上 Origin 头，服务端在返回头部信息时，增加 Access-Control-Allow-Origin 字段。这种方法比较优雅，但需要服务端进行特定配置。
下面我们主要介绍 CORS 的实现方法及注意事项。
CORS 实现
CORS 全称为 Cross-Origin Resource Sharing，即跨域资源共享。当客户端在跨域请求时，服务端可以通过设置特定的 HTTP 头部来支持 CORS。下面列举了一些常用的 CORS 相关的 HTTP 头：
Access-Control-Allow-Origin：指定请求方的域名。如果值为星号(*)，则表示接受所有域名的请求。
Access-Control-Allow-Credentials：是否允许跨域请求发送 cookie。值为 true 则允许。
Access-Control-Allow-Methods：可以接受的 HTTP 请求方法，比如 GET、POST。
Access-Control-Allow-Headers：可接受的请求头列表。
服务端配置示例（使用 Express 框架）：
----- ------- - ------------------- ----- --- - ---------- --------------------- ---- ----- - -- ----------------- ----------------------------------------- ----- ------------------------------------------ -------- ----------------- ------------- --------- ------------------------------------------ ----- ----- ---- --------- ---------------------------------------------- ------ ------- ---
客户端使用方法：
------------------------------------- -
------- ------
----- -------
------------ ----------
-------- -
--------------- ------------------
-
--
--------- -- -----------
---------- -- -
------------------
--
---------- -- ------------------注意事项
虽然 CORS 可以有效解决跨域问题，但在实际开发中也有一些需要注意的问题：
服务端必须支持 CORS 头信息。
如果客户端设置了
withCredentials字段为true，服务端响应头必须指定来源域名，不能使用星号(*)。客户端设置了
withCredentials字段为true，服务端必须设置Access-Control-Allow-Credentials字段为 true。不同浏览器的实现可能有些许差异，需要进行技术栈和浏览器兼容性的处理。
结论
RESTful API 跨域访问在实际开发中是必须面对的问题，而 CORS 是解决跨域访问的较为优雅和标准化的方式。在使用 CORS 进行跨域访问时，需要注意服务端配合及各种情况的处理。对于前端开发工程师来说，熟练掌握跨域技术，可以提高自身的开发效率和技术水平。
参考资料：
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672b4bb9ddd3a70eb6d26c80