跨域访问是指在 web 应用中，浏览器发起的跨域请求被服务器拒绝。要解决这个问题，我们需要在服务器端进行相应的配置。在此，我们将介绍如何使用 Express.js 框架进行 web 应用的跨域访问。
什么是跨域访问
跨域访问是指在 web 应用中，浏览器在访问一些来源不同的资源时会受到同源策略的限制，从而导致请求失败的问题。同源策略是一种约束客户端脚本能够访问哪些资源的安全机制。
同源是指协议、域名、端口号均相同的两个 URL。如果这三项中任意一项不同，就被认为是跨域。
例如，假设现在有两个 URL:
这两个 URL 不跨域，因为其协议、域名、端口号均相同。
但是如果一个请求是从 http 协议向 https 协议发起的，就会引起跨域访问问题。同样，如果域名或端口号不同，也会引起跨域问题。
跨域访问的解决方案
要解决跨域访问的问题，我们需要在服务器端进行相应的配置。
常见的跨域访问解决方案包括：
- CORS（跨域资源共享）
- JSONP
- 代理服务器
在本文中，我们将介绍如何使用 CORS 来实现跨域访问。
使用 Express.js 实现 CORS
在 Express.js 中使用 CORS 非常简单，我们只需要安装 cors 这个 npm 包，并在我们的应用程序中使用它即可。
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ---- - --------------- ----- --- - --------- -- -- ---- --- --------------- -- ---
在上面的代码中，我们使用了 app.use() 方法来添加 cors 中间件。中间件是 Express.js 框架中非常强大的一个概念，通过它我们可以添加一系列的处理函数，来处理客户端请求。
cors 中间件可以通过向 HTTP 响应头添加一些特定的信息来控制跨域访问。这些信息包括：
- Access-Control-Allow-Origin：指定可以访问该资源的域名。如果值为 *，则表示允许所有域名访问。
- Access-Control-Allow-Headers：指定服务器支持的所有头信息。
- Access-Control-Allow-Methods：指定服务器支持的所有请求方法。
下面的代码展示了如何使用 cors 中间件来实现跨域访问：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ---- - --------------- ----- --- - --------- -- -- ---- --- -------------- ------- ------------------------- -- ----- -------- ----------- -- ------- --------------- ---------------- ---------------- -- ------ --- -- ---
在上面的代码中，我们在添加 cors 中间件时，指定了允许访问该资源的域名、允许的请求方法以及允许的请求头信息。
至此，我们已经在 Express.js 应用中成功添加了跨域访问的支持。
总结
跨域访问是在 web 开发中经常遇到的问题之一，解决它的方案也有多种。CORS 是其中一种比较常用的方案，在 Express.js 中也非常容易实现。
在使用 CORS 进行跨域访问时，我们需要注意使用合适的参数，并通过添加合适的 HTTP 响应头来控制访问权限。
希望通过本文的介绍能够让读者更好的理解跨域访问的问题，也能够帮助读者更好的在 web 开发中应对此类问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ab2fd48841e98948cd001