前言
随着前端技术的不断创新和发展，越来越多的应用程序开发者需要跨域资源共享（CORS）协议来完成跨域访问。Lws-cors 是一个 npm 包，可以通过在 lws （Learn Web开发服务器）中使用来完成跨域资源共享。
在本文中，我们将在深入讲解 lws-cors 的基本概念和用法的同时，还将为你展示如何使用示例代码和实践案例。同时，我们也会分享一些前端开发者可以学习和指导的技巧和最佳实践。
正文
基本概念
在开始使用 lws-cors 之前，我们需要了解 CORS 的基本概念。跨域资源共享（CORS）是浏览器为了安全原因而限制跨域 HTTP 请求的一种机制。具体来说，它允许跨域访问请求的服务器返回一组允许的 HTTP 头部字段。
而 lws-cors 利用了 CORS 机制，可以让前端应用通过 HTTP 达到跨域目的。 这里简单介绍一下，CORS 发送的标准请求与简单请求：
- 标准请求：类似于 Get，Post 等方法以外的请求，例如 PUT，DELETE 等。
- 简单请求：一般指使用大多数情况下的请求类型，如 get，post 等
搭建开发环境
在使用 lws-cors 之前，我们需要在本地开发环境中进行安装，目前我们假设 node 环境已经配置好。
安装 lws
要使用 lws-cors，必须先安装 lws。
npm install --save-dev lws
安装 lws-cors
安装 lws-cors:
npm install --save-dev lws-cors
示例代码
我们现在访问一个跨域的 api，例如在请求接口 http://api.example.com/ 时，会被浏览器拦截。
我们在本地服务器开发环境中使用 lws-cors 在后端处理跨域问题。首先，我们需要启动服务器:
npx lws -d . -s .
在根目录中，我们新建一个 index.html 文件：
-- -------------------- ---- -------
--------- -----
------
------
-----------------------
-------
------
---- ------------------
--------
--------------------------------
----------- -- -
------------
---------- -- -
---------------------------------------------- - ----
--
--
---------
-------
-------接着，我们使用 lws-cors 在后端处理跨域问题
npx lws --cors --health --host 0.0.0.0 --mount . --spa index.html
访问 http://localhost:8000/，可以看到跨域资源成功返回，会按原计划展示 json。
深入实践
在实践中，我们通常需要针对不同内容进行 CORS 配置，以满足项目要求。在 lws-cors 中，有许多现成的可配置项，包括：
- origin：用于允许跨域的请求地址；
- methods：用于允许的请求方法；
- exposeHeaders：用于允许的响应头；
- preflightContinue：用于控制是否进行预检请求；
- allowMethods：仅仅在预检请求时有效，用于允许的方法列表；
- allowHeaders：仅仅在预检请求时有效，用于允许的请求头。
下面来看一下示例：
-- -------------------- ---- -------
----- --- - ---------------
----- ---- - --------------------
----- --- - -------------
----- ------- - -
------- ----
-------- --------
-------------- -------------------- ------------------------
------------------ ------
------------- ------- ------ ------- ----------
------------- ---------------- ----------------
--
-----------------------
------------在以上示例中， origin 设置为 ‘*’，表示允许所有请求的来源。进行预检请求的允许方式通过 allowMethods 和 allowHeaders 进行设置，配置后，预检请求返回结果如下：
HTTP/1.1 204 No Content Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET,PUT, > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/66841) ，转载请注明来源 [https://www.javascriptcn.com/post/66841](https://www.javascriptcn.com/post/66841)