如何有效解决 Deno 运行时遇到的跨域问题-JavaScript中文网-JavaScript教程资源分享门户

前言

Deno 是一个基于 JavaScript 和 TypeScript 的新型运行时环境，具有更安全、更简洁的特点。然而，与其它运行时环境类似，Deno 在跨域问题上也存在一些困扰开发者的问题。本文将介绍如何有效解决 Deno 运行时遇到的跨域问题。

跨域的原因和影响

在访问跨域资源时，不同源的资源无法直接访问。比如，脚本里面发起的 AJAX/ Fetch 请求，如果跨域，浏览器就会阻止这些请求，倘若不阻止的话，会带来许多安全问题。

解决跨域问题的两种方法

方法一：设置 CORS

CORS 跨域资源共享，也是一种跨域解决方案。在服务端进行相应的设置，客户端不需要做任何改动即可实现跨域。只需在 HTTP 响应头中增加如下设置即可：

Access-Control-Allow-Origin：* // * 表示允许任意域名跨域访问

具体示例如下：

// javascriptcn.com 代码示例
import { serve } from 'https://deno.land/std/http/server.ts';
const s = serve({ port: 3000 });
console.log('http://localhost:3000/');
for await (const req of s) {
  req.respond({
    headers: new Headers({
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*', // CORS
    }),
    body: JSON.stringify({ code: 200, msg: 'Hello World' }),
  });
}

方法二：使用代理

另一种解决跨域请求的方式是在客户端（浏览器）使用代理，通过代理服务器来打通跨域的网络流，让同源策略得以绕过，达到跨域的目的。

具体步骤如下：

在本地开启一个代理服务器。
在代理服务器上访问要跨域的网页。
代理服务器将该请求发送到真正的服务器上。
代理服务器接收到真正服务器的响应后，再将响应转发给浏览器。

示例代码如下：

// javascriptcn.com 代码示例
import { Application } from 'https://deno.land/x/oak/mod.ts'
const app = new Application()

app.use(async (ctx, next) => {
  await ctx.send({
    root: `${Deno.cwd()}/public`,
    index: 'index.html',
  })
})

app.listen({ port: 3000 })

使用 oak 这个库创建一个代理服务器，监听 3000 端口，接收前端访问，在同一台服务器上向真正的服务器发出请求，返回正确的资源。

总结

本文介绍了两种有效解决 Deno 运行时遇到的跨域问题的方法。其中，CORS 是服务器端需要进行设置，而代理方案则是客户端实现。选择方法依据实际情况而定，具体需根据项目实际情况进行选择。希望本文能够对读者有所启发，帮助开发者更好地应对跨域问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65216bc395b1f8cacd8ea6df