前言
随着前端应用的不断发展，跨域资源共享（CORS）已经成为越来越多前端工程师必须面对的问题。随着互联网技术的飞速发展，前端跨域资源访问问题愈发明显，也成为前端开发工作一大难点。以 JavaScript 发起的 HTTP 请求为例，浏览器通常会限制请求的资源必须来自同源（即协议、域名和端口都相同）。
跨域资源共享（CORS）
CORS（Cross-Origin Resource Sharing）是一种基于 HTTP 头的机制，该机制允许服务器在响应中设置 HTTP 头 Access-Control-Allow-Origin，从而使一个资源可以被跨域共享。CORS 主要用于 AJAX 异步请求和 Web Fonts 请求，以允许跨域访问服务器资源。
CORS 机制，简而言之，就是浏览器将发起跨域请求时，会在 HTTP 请求头中添加附加信息，服务器在接收到请求后进行判断，根据附加信息判断是否允许该跨域请求。
解决方法
下面我们来介绍几种常见的跨域解决方法。
JSONP（JSON with Padding）
JSONP 是一种跨域访问方式，原理是在前端通过动态插入一个 <script> 标签，并设置该标签的 src 属性等于需要请求的接口 URL，然后服务端收到请求后，以 JSON 格式将数据放入回调函数参数中返回给客户端，并在客户端定义该函数，并传入回调函数名称（即回调函数名），从而达到跨域请求。
-- -------------------- ---- -------
------- -----------------------
-------- ---------------- -
------------------
-
--- ------ - ---------------------------------
----------- - ------------------
---------- - ------------------------------------------
-------------------------------------------------------------
---------然后在服务端实现根据回调函数名返回处理后的数据，并返回 text/javascript 的响应头：
-- -------------------- ---- ------- -- --------- ----- -------- - ------------------- ----- ---- - - ----- -- ---- --------- -- ----- ------ - --------------------- -- -- ----- ----- -----------------------------------
CORS 资源共享
CORS 跨域资源共享，主要用于请求数据和 API 接口。客户端通过浏览器 HTTP 请求头中添加 Origin 参数告诉服务器请求的来源，服务器在响应头中添加 Access-Control-Allow-Origin 指定来自哪些来源的请求可以访问该资源。
// 客户端代码中数据请求
fetch('http://example.com/data')
.then(res => res.text())
.then(res => console.log(res))
.catch(err => console.log(err));然后在服务器返回请求时响应头添加 Access-Control-Allow-Origin：
// 添加响应头
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', 'http://example.com');
next();
});代理
代理也是一种解决跨域问题的方法，顾名思义，就是通过一个中间代理层来转发请求。这种方法的核心思想是：后端使用 AJAX 来获取数据，前端通过 AJAX 请求来获取数据并渲染模板。这样就可以避免跨域。
-- -------------------- ---- -------
-- ----
----- ----- - ---------------------------------
--------------- -------
------- ---------------------
------------- -----
------------ -
-------- --
-
----在 webpack 中使用：
-- -------------------- ---- -------
-- ----
---------- -
------ -
------- -
------- ---------------------
------------- -----
------------ -
-------- --
-
-
-
-结语
本文从介绍跨域资源共享的概念开始，深入浅出地分析了跨域问题的解决方法，针对纯前端解决方案提供了 JSONP 和 CORS 的实现方法以及如何使用代理来解决跨域问题。希望本文能够对您有所帮助和启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6781fd78935627c900f293c5
