fetch 引发 blocked by CORS policy
起步
当使用 fetch 函数做跨域请求时,大概率会在浏览器 Console 中看到这样一个错误信息:Access to fetch at 'xxx' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
。
会出现上述错误是因为你在做跨域请求,这是一项浏览器认为不安全的操作。那么如何鉴定是不是在跨域呢?要看 url 是否同源,同源的标准是:协议,域名,端口均相同。详情可参看 浏览器的同源策略。
除大公司外,我斗胆猜测一下你之所以需要 CORS (跨域资源共享),可能是以下原因之一:1. 你在写 demo; 2. 你处于前后端分离开发。
接下来我会后端采用 flask 讲述如何解决 CORS 被禁问题。选择 flask 是因为该框架在处理 Content-Type 为 text/plain 和 application/json 时存在明显区别,有助实验观察。如果你使用的是其他语言,或者其他框架,都没关系,原理是相通的。
从一个 demo 入手
假设当前我知道了 fetch 函数如何发起 post 请求,但我想测试一下,验证我知道的对不对。于是我写了下面这段 js 代码:
fetch("http://127.0.0.1:8080/login", {
method: "POST",
body: JSON.stringify({
username: "zhong",
password: "zzZhong",
}),
})
.then(resp => resp.json())
.then(data => console.log(data))
这段 js 的含义是,向 http://127.0.0.1:8080/login 发起 post 请求,并等待后端响应,最后将后端响应的数据打印到 Console 中。
毕竟我只是想简单测试一下,偷懒起见,把 js 代码嵌入 html 文件中,并且在浏览器里以绝对路径的方式直接访问 html 文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"</