[指南] 网页前后端分离开发 常见的跨网域问题解决方式一览

章节连结

前后端分离开发时,若前端想测试透过 API 发送需求到后端服务器时,有一定的机率遇上 CORS ( Cross-Origin Resource Sharing ) 的问题。这会导致浏览器上无法正常显示从后端服务器所传回来的资料,或是在浏览器发送预先请求时就被档下。这边笔记下可能的解方。
front-back-end-development-cors-issue


解决方法

1. 远端服务器加上 Header set Access-Control-Allow-Origin ‘*’

这算是最根本有效的办法了,不过服务器端可能还需要根据你的请求类型,作出对应的调整。如果是一般的 GET / POST 请求,着实是可以用这方法来存取 API 的。如果你是用 Node.js ,可以加入 Node.js CORS 这只官方自己出的套件。或者,你也可以透过在远端主机根目录下,编辑 .htaccess 档,在里头加上:Header set Access-Control-Allow-Origin ‘*’。

2. 使用第三方服务

例如 cors-anywhere,可以观看其 Github 范例来执行操作。


按赞加入粉丝团

延伸阅读