背景
在前端开发过程中经常有需要跨域访问多个不同的服务或者系统,而在这个过程中我们可能需要使用到 mongoose 来进行 MongoDB 连接和操作。尽管我们已经在服务端同时对跨域请求进行了允许处理,但是我们还是会遇到一些跨域问题。那么该如何避免这些 CORS 问题呢?
解决方案
方案一:使用中间件
在服务端设置我们需要使用的中间件来处理请求,代码如下:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ----- -------------- - -------------------------- -------------- ------- ---------------- --------- - -- --------- ------ -------------- ------ -- ------------------------------- --- --- - ----- --- - ---- ---- ------ --- ---- ---- ---- --- ----- ------ ---- --- --------- --------- ------ ------------ ----------- ------- - ------ -------------- ------ - ----
上述代码中使用了 cors 中间件来设置允许跨域请求,其中的 allowedOrigins
数组变量还需要针对我们项目进行修改。
除此之外,我们还需要对 mongoose 进行一些配置,代码如下:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- -------- - -------------------- ----- --- - ---------- ----- -------------- - -------------------------- -------------- ------- ---------------- --------- - -- --------- ------ -------------- ------ -- ------------------------------- --- --- - ----- --- - ---- ---- ------ --- ---- ---- ---- --- ----- ------ ---- --- --------- --------- ------ ------------ ----------- ------- - ------ -------------- ------ - ---- ---------------- - --------------- -------------------------------------------------- - ---------------- ----- ------------------- ----- --------------- ----- ----------------- ----- -- -------- -- -------------------- ------------- ----- -- - -------------------- -------------- --------------------------- ----------- ---------- --------------- ---------- - --------------- -- ------------ ---
方案二:对请求进行转发
在处理跨域问题时,我们可以直接将请求转发到 Mongoose 后端服务,然后再返回给前端。我们可以借助于 http-proxy-middleware
以及 cors
来完成这个过程。
代码如下:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- -------- - ------------------- ----- ---- - ---------------- ----- ------------------- - --------------------------------- ----- --- - ---------- ----- ------------ - ------------------------ ----- -------------- - -------------------------- -------------- ------- ---------------- --------- - -- --------- ------ -------------- ------ -- ------------------------------- --- --- - ----- --- - ---- ---- ------ --- ---- ---- ---- --- ----- ------ ---- --- --------- --------- ------ ------------ ----------- ------- - ------ -------------- ------ - ---- --------------- --------------------- ------- ------------- ------------- ---- ---- ---------------- -- -- - ------------------ ------ --------- -- ---- ------- ---
注意事项
- 如果我们设置了多次跨域请求处理中间件,那么我们需要根据服务器代码中中间件顺序来自顶向下进行处理;
- 调用跨域请求的浏览器也会根据请求方式不同分别发送一到两个请求,并且在发送前一定会先发送 HTTP Head 请求,所以我们需要设置好该类型请求的丢弃策略。
结论
在前端开发过程中,处理跨域请求是必不可少的。而在使用 Mongoose 进行 MongoDB 连接与操作时,我们可以使用上述两种方式来避免 CORS 问题并保证应用程序的正常运行。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6731b2ba0bc820c58239ecd2