我从浏览器发送这样的 POST 请求:
fetch(serverEndpoint, {
method: 'POST',
mode: 'no-cors', // this is to prevent browser from sending 'OPTIONS' method request first
redirect: 'follow',
headers: new Headers({
'Content-Type': 'text/plain',
'X-My-Custom-Header': 'value-v',
'Authorization': 'Bearer ' + token,
}),
body: companyName
})
当请求到达我的后端时,它不包含 X-My-Custom-Header
也不包含 --- Authorization
标头。
我的后端是用于 Firebase 的 Google Cloud 函数(基本上只是 Node.js 端点),如下所示:
exports.createCompany = functions.https.onRequest((req, res) => {
let headers = ['Headers: ']
for (let header in req.headers) {
headers.push(`${header} : ${req.headers[header]}`)
}
console.log(headers)
...
}
该 Google Cloud for Firebase 函数的控制台日志不包含任何 X-My-Custom-Header
或 Authorization
标头。
怎么了?
编辑 1
因此,在 Chrome 中使用开发工具 a 检查既没有 X-My-Custom-Header
也没有 Authorization
标头是从浏览器发送的……现在的问题是:为什么?我如何解决它?
编辑 2
有关我的应用程序的更多信息:它是 React 应用程序。我禁用了服务人员。我尝试创建 Request
并使用 req.headers.append()
专门添加标头。标题仍然不会发送。
原文由 Rasto 发布,翻译遵循 CC BY-SA 4.0 许可协议
同源策略 限制网页可以发送到来自另一个源的资源的请求的种类。
在
no-cors
模式下,浏览器仅限于发送“简单”请求——那些仅具有 安全列表方法 和 安全列表标头 的请求。To send a cross-origin request with headers like
Authorization
andX-My-Custom-Header
, you have to drop theno-cors
mode and support preflight requests (OPTIONS
)。“简单”和“非简单”请求之间的区别是出于历史原因。网页总是可以通过各种方式(例如创建和提交表单)执行一些跨域请求,因此当 Web 浏览器引入一种发送跨域请求( 跨域资源共享 或 CORS)的原则性方法时,它是决定这样的“简单”请求可以免除预检
OPTIONS
检查。