什么是跨域访问
跨域访问是指在同一浏览器中，如果一个网页的脚本试图访问来自不同源的服务器上的资源，那么就会发生跨域访问。这里的“不同源”是指协议、域名、端口号中任意一项不同。
为什么需要跨域访问
在 Web 应用中，跨域访问是必不可少的。例如，一个网站需要从另一个网站获取数据，或者需要调用第三方的 API，这些都需要跨域访问。
CORS 是什么
CORS（Cross-Origin Resource Sharing）是一种机制，允许 Web 应用从不同的域访问其资源。它是 W3C 标准，全称为“跨域资源共享”。
CORS 的实现，需要浏览器和服务器共同支持。浏览器会在请求中添加一个 Origin 头部，服务器可以根据这个头部来判断是否允许跨域访问。
CORS 的三种请求方式
CORS 请求分为三种：
- 简单请求：只使用 GET、POST、HEAD 方法，且没有自定义的请求头；
- 非简单请求：使用其他方法（如 PUT、DELETE）、或者使用自定义的请求头；
- 预检请求：非简单请求发送前，会先发送一个 OPTIONS 请求，称为“预检请求”。
解决 CORS 跨域访问问题的方法
服务器端设置
1. 设置响应头
服务器可以设置 Access-Control-Allow-Origin 头部，来允许跨域访问。例如，以下代码表示允许所有域名访问：
---------------------------- -
如果只允许特定域名访问，可以将 * 替换为具体的域名，例如：
---------------------------- -------------------
2. 设置其他响应头
服务器还可以设置其他的响应头，例如：
----------------------------- ---- ----- ---- ------- ------- ----------------------------- ------------- -------------
这些头部用于允许特定的请求方法和请求头。
客户端设置
1. 使用 XMLHttpRequest
在客户端，可以使用 XMLHttpRequest 对象来发送 AJAX 请求。例如：
--- --- - --- -----------------
--------------- --------------------------------
------------------- - -----
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
------------------------------
-
--
-----------其中，withCredentials 属性用于启用跨域访问，认证信息也会随着请求发送到服务器。
2. 使用 Fetch
在 ES6 中，还可以使用 Fetch API 来发送 AJAX 请求。例如：
------------------------------------- -
------- ------
------------ ---------
--
-------------- -- -
-- ------------- -
------ ----------------
-
--
---------- -- -
------------------
--
------------ -- -
---------------------
---其中，credentials 属性用于启用跨域访问，include 表示认证信息也会随着请求发送到服务器。
示例代码
以下是一个使用 Express 框架的示例代码，用于设置 CORS：
----- ------- - ------------------- ----- --- - ---------- ------------- ---- ----- -- - ----------------------------------------- ----- ------------------------------------------ ----- ----- ---- ------- ---------- ------------------------------------------ -------------- ---------------- ------- --- ---------------- ----- ---- -- - ---------- -------- ------- ------- --- --- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
在客户端中，可以使用 XMLHttpRequest 或 Fetch API 来发送 AJAX 请求：
-- -- --------------
--- --- - --- -----------------
--------------- ------------------------------
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
------------------------------
-
--
-----------
-- -- ----- ---
----------------------------------- -
------- ------
------------ ---------
--
-------------- -- -
-- ------------- -
------ ----------------
-
--
---------- -- -
------------------
--
------------ -- -
---------------------
---总结
CORS 是一种机制，用于允许 Web 应用从不同的域访问其资源。它是 W3C 标准，全称为“跨域资源共享”。
要解决 CORS 跨域访问问题，可以在服务器端设置响应头，也可以在客户端设置请求头。在客户端中，可以使用 XMLHttpRequest 或 Fetch API 来发送 AJAX 请求。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65e12c2d1886fbafa4e34dfc