在进行前端开发过程中，我们会经常遇到跨域问题。这是由于现代浏览器的同源策略所导致的。而在 Deno 中，同样也存在跨域问题。本文将介绍 Deno 中遇到的跨域问题以及解决方法。
什么是跨域？
跨域是指在浏览器中，当一个页面的脚本试图去访问另一个页面的资源时，如果这两个页面的协议、域名或者端口不同，就会产生跨域问题。同源策略是浏览器为了保障用户信息安全而制定的限制。
Deno 中的跨域问题
在 Deno 中，我们可以通过 HTTP 模块来创建服务器和客户端。当我们在服务器中使用 fetch 请求其他域名的资源时，就会遇到跨域问题。
例如，我们在 Deno 中写了一个简单的服务器：
// javascriptcn.com 代码示例
import { serve } from "https://deno.land/std/http/server.ts";
const server = serve({ port: 8000 });
console.log("http://localhost:8000/");
for await (const req of server) {
req.respond({ body: "Hello World\n" });
}当我们在浏览器中访问该服务器时，会发现浏览器控制台出现如下错误：
Access to fetch at 'http://localhost:8000/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这是因为在浏览器中，同源策略限制了我们访问不同域名的资源。
解决方法
1. 设置 Access-Control-Allow-Origin
在服务器端，我们可以通过设置响应头的 Access-Control-Allow-Origin 属性来解决跨域问题。该属性用于指定允许访问该资源的域名。
例如，我们可以将服务器代码修改为：
// javascriptcn.com 代码示例
import { serve } from "https://deno.land/std/http/server.ts";
const server = serve({ port: 8000 });
console.log("http://localhost:8000/");
for await (const req of server) {
req.respond({
headers: new Headers({
"Access-Control-Allow-Origin": "*",
}),
body: "Hello World\n",
});
}这里，我们将 Access-Control-Allow-Origin 属性设置为 "*"，表示允许任何域名访问该资源。在实际开发中，我们应该根据实际情况设置该属性。
2. 使用代理服务器
在开发过程中，我们可以使用代理服务器来解决跨域问题。代理服务器可以将浏览器发送的请求转发到目标服务器上，然后将目标服务器的响应返回给浏览器。这样浏览器就不会产生跨域问题了。
例如，我们可以使用 http-proxy 代理库来创建一个代理服务器：
// javascriptcn.com 代码示例
import { serve } from "https://deno.land/std/http/server.ts";
import { createProxyServer } from "https://deno.land/x/http_proxy/mod.ts";
const server = serve({ port: 8000 });
const proxy = createProxyServer({ target: "http://localhost:9000" });
console.log("http://localhost:8000/");
for await (const req of server) {
proxy.web(req, req.respond).catch((err) => {
console.error(err);
});
}这里，我们将代理服务器监听在 8000 端口，将请求转发到目标服务器 localhost:9000 上。在浏览器中访问 http://localhost:8000/ 时，代理服务器会将请求转发到目标服务器上，然后将目标服务器的响应返回给浏览器。
总结
跨域问题是前端开发中常见的问题。在 Deno 中，我们可以通过设置 Access-Control-Allow-Origin 属性或者使用代理服务器来解决跨域问题。在实际开发中，我们应该根据实际情况选择合适的解决方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6559ca9fd2f5e1655d438834