什么是 CORS ？
CORS（跨源资源共享，Cross-Origin Resource Sharing）是一个用于描述浏览器如何处理跨源请求的安全机制。在浏览器中，同源策略是一个重要的安全特性，它保证了一个网站只能读取自己网站的数据，而不能读取其他网站的数据。跨域请求则是指在一个网站的页面中使用了另外一个域名的资源，如 Ajax 发起的请求等。这种情况下，浏览器为了遵守同源策略，会限制跨域请求的权限，而 CORS 则是为了规避同源策略的限制而设计的机制。
Deno 中如何处理 CORS ？
Deno 是一个安全的 TypeScript 运行时环境，它有着类似于 Node.js 的 API 设计，而且在处理跨域请求方面非常灵活，下面让我们进入实战环节。
通过标记 --allow-net 处理 CORS
在 Deno 中向外部服务请求数据时，需要通过标记 --allow-net 来授予访问外部服务的权限。若请求的地址是跨域的，则 Deno 默认是不允许跨域的。那么，如何在 Deno 中处理跨域请求呢？以一个简单请求为例：
const response = await fetch("https://cdn.jsdelivr.net/npm/vue/dist/vue.js");
const text = await response.text();
console.log(text);我们使用 fetch API 请求了一个 Vue.js 的 js 文件，并打印了其内容。但当我们运行该代码时，会发现在运行过程中出现类似以下的跨域报错信息：
Access to fetch at 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. if you want to allow CORS, please use the --allow-net flag.
这时候我们可以通过添加 --allow-net 标记来授权相应资源的访问权限，如下所示：
deno run --allow-net file.ts
这样，在请求跨域资源时便可以避免跨域报错的问题了。
处理 CORS 预请求 OPTIONS
如果你需要使用 PUT、DELETE 或者其它开发者定义的 HTTP 方法，你会注意到会出现如下错误：
Access to XMLHttpRequest at 'http://localhost:3001/api/user' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
这是因为浏览器会自动在 POST，PUT，DELETE 类型的请求前发起一个 OPTIONS 请求，称为 CORS 预请求，以获知服务器是否允许该跨域请求。为了能够响应这个 preflight 请求，服务器需要添加 Access-Control-Allow-Origin 和 Access-Control-Allow-Headers 这两个响应头。在 Deno 中，可以通过如下代码为预请求添加响应头：
if (request.method === "OPTIONS") {
response.headers.set("Access-Control-Allow-Methods", "POST,DELETE,PUT");
response.headers.set("Access-Control-Allow-Headers", "Authorization, Content-Type");
response.status = 204;
return response;
}这样，预请求就可以被成功响应了。
总结
通过上述实例我们可以看出，在 Deno 中处理 CORS 跨域请求非常方便。在跨域场景下，我们可以通过带有 --allow-net 标记的 deno 命令来掌握请求数据权限，同时也可以通过响应预请求的方式规避跨域请求的安全限制。希望本文对您有所帮助，如有疑问或者建议，欢迎留言讨论！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664a99d9d3423812e4986762