DAY06 - API串接常见问题 - CORS - 解决CORS问题篇

前面，我们知道为什麽会看到CORS的错误讯息，也简单的知道如果我们要在浏览器上跨来源存取API资料，就要通行证，新的http header，那这个通行证是什麽呢？今天就让我们看一下吧

其实要解决CORS的问题，正宗的解法，就是要请後端设置CORS header

後端要怎麽设定哪些通行证呢？根据不同的需求，需要不同的通行证，有哪些通行证呢？

[正规方法] 请後端设置放行通行证 - http header

• Access-Control-Allow-Origin:
  允许哪些网址可以跨网域使用此资源。 Eg. http://web.com.tw 或 给 * 允许所有来源可以跨域存取。
  ex. Access-Control-Allow-Origin: *
• Access-Control-Allow-Credentials：
  当前端API request需要带cookies时，就须此属性并将值设定为true，预设为false。另外，当此属性设定为true时，Access-Control-Allow-Origin则不能设定为*
  ex. Access-Control-Allow-Credentials:true
• Access-Control-Allow-Methods：支援的Method有哪些(POST, GET, PUT, DELETE...)
  ex. Access-Control-Allow-Methods:POST, GET, PUT, DELETE
• Access-Control-Allow-Headers：
  允许哪些自定义的header
  ex. Access-Control-Allow-Headers: Authorization
• Access-Control-Max-Age：
  preflight request的资讯（包含Access-Control-Allow-Methods和 Access-Control-Allow-Headers 可以cache的秒数上限(单位：秒)。每一个浏览器会有预设的最大值 ，当 Access-Control-Max-Age 大於预设值时，会优先采用预设值。
  ex. Access-Control-Max-Age: 600 // Cache results of a preflight request for 10 minutes
• Access-Control-Expose-Headers：表示API Server允许浏览器存取response header的白名单
  ex. Access-Control-Expose-Headers:X-My-Custom-Header -> 表示浏览器能够存取response当中的 X-My-Custom-Header

[暂时方法] 使用CORS Proxy(跨域代理服务器): 以第三方CORS Proxy - cors-anywhere为例

如果後端暂时找找不到人，前端可以用怎麽样的方式暂时自救一下呢...
前面有说到，跨网域的限制是因为浏览器所以才会有的，
如果先透过非浏览器的方式取的API response，加上该给的header通行证，再传回给前端，那是不是就没问题了！而这种方式，就叫CORS Proxy。

原理架构如下：
Browser ↔ CORS Proxy Server ↔ API
透过CORS Proxy Server的模式绕过 浏览器的跨域限制， 进而实践存取API Server的response

CORS Proxy可以自己架设，也可以使用第三方的CORS Proxy，其中很方便使用的就是cors-anywhere 了～

cors-anywhere的使用方式非常简单，直接把 https://cors-anywhere.herokuapp.com/ 加在你的API URL前就可以了，如以下的范例：

const corsURL = 'https://cors-anywhere.herokuapp.com/'; // use cors-anywhere to fetch api data
const apiURL = 'https://www.api.com/device'; // origin api url
// api call
axios
.get(`${corsURL}${apiURL}`, {

})
.then((response) => (console.log(response))) // 把结果集传到info这个数组
.catch((error) => {
    console.warn(error);
});

cros-anywhere实际加上後可能会遇到的问题

可能会在console看到这个错误


可以切到network後，发现API显示的错误是403


再切换到response会看到以下的讯息 "See /corsdemo for more info"


在字上点选右键，open in new tab

会带你到cros-anywhere的声明页面，点选按钮“request temporaty access to the demo server”

按完後底下会出现一行文字，告诉你现在已经可以暂时使用这个server了


回到原本存取API的页面，再按一下重新整理，应该就可以顺利看到罗

＊不过cros-anywhere在太多的request下，也会限制使用次数，所以这只是一个暂时前端开发方式，还是要请後端大大把API的header加好，通行证权限开好开满才是正途R～～

看到这里有发现其实这个是後端需要设定好的项目吗？但前端为什麽要知道？
这是因为这是前端在使用时才会遇到问题（浏览器的限制）。因此前端必须知道这个问题的原因之後，自己遇到这个问题的时候也才能很确定该怎麽处理喔（像我一开始遇到的时候因为搞不清楚状况很想自己解决，搞了好久QQ)，知道原理後也才能与後端讨论或建议应该怎麽加才能正常使用喔～～

参考资料

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age