admin管理员组文章数量:1134246
I am sending POST request like this from browser:
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
})
By the time the request reaches my back-end it does not contain X-My-Custom-Header nor Authorization header.
My back-end is Google Cloud function for Firebase (basically just Node.js endpoint) that looks like this:
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)
...
}
The console log of that Google Cloud for Firebase function does not contain any X-My-Custom-Header nor Authorization header.
What is wrong?
Edit 1
So using dev tools in Chrome a checked that neither X-My-Custom-Header nor Authorization header is send from the browser... The questions now are: Why? How do I fix it?
Edit 2
More information about my app: It's React app. I have disabled service worker. I have tried to create Request and specifically add headers using req.headers.append(). The headers still wouldn't send.
I am sending POST request like this from browser:
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
})
By the time the request reaches my back-end it does not contain X-My-Custom-Header nor Authorization header.
My back-end is Google Cloud function for Firebase (basically just Node.js endpoint) that looks like this:
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)
...
}
The console log of that Google Cloud for Firebase function does not contain any X-My-Custom-Header nor Authorization header.
What is wrong?
Edit 1
So using dev tools in Chrome a checked that neither X-My-Custom-Header nor Authorization header is send from the browser... The questions now are: Why? How do I fix it?
Edit 2
More information about my app: It's React app. I have disabled service worker. I have tried to create Request and specifically add headers using req.headers.append(). The headers still wouldn't send.
5 Answers
Reset to default 180 +500The same-origin policy restricts the kinds of requests that a Web page can send to resources from another origin.
In the no-cors mode, the browser is limited to sending “simple” requests — those with safelisted methods and safelisted headers only.
To send a cross-origin request with headers like Authorization and X-My-Custom-Header, you have to drop the no-cors mode and support preflight requests (OPTIONS).
The distinction between “simple” and “non-simple” requests is for historical reasons. Web pages could always perform some cross-origin requests through various means (such as creating and submitting a form), so when Web browsers introduced a principled means of sending cross-origin requests (cross-origin resource sharing, or CORS), it was decided that such “simple” requests could be exempt from the preflight OPTIONS check.
Firstly : Use an object instead of new Headers(..):
fetch('www.example.net', {
method: 'POST',
headers: {
'Content-Type': 'text/plain',
'X-My-Custom-Header': 'value-v',
'Authorization': 'Bearer ' + token,
}
});
Secondly : Good to know, headers are lowercased by fetch!!
Thirdly : no-cors mode limits the use of headers to this white list :
AcceptAccept-LanguageContent-LanguageContent-Typeand whose value is (application/x-www-form-urlencoded,multipart/form-data,text/plain)
That's why only your Content-Type header is sent and not X-My-Custom-Header or Authorization.
Can you try this?
fetch(serverEndpoint, {
credentials: 'include'
})
Ref. https://developers.google.com/web/updates/2015/03/introduction-to-fetch#sending_credentials_with_a_fetch_request
I also had this same issue. I resolved it by removing 'no-cors' from javascript and adding the following in server side spring boot.
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
protected void configure(HttpSecurity httpSecurity) throws Exception {
.antMatchers(HttpMethod.OPTIONS, "/**").permitAll()
}
}
1st: when you call headers in your exports.createCompany function, you have let headers = ['Headers: '] with a capital H instead of lowercase h which might cause errors. you also have a comma after token in the headers which shouldn't be there.
2nd: everytime i have used fetch requests in react native, the header: doesn't need the new Headers on it.
try this:
fetch(serverEndpoint, {
method: 'POST',
mode: 'no-cors',
redirect: 'follow',
headers:{
'Content-Type': 'text/plain',
'X-My-Custom-Header': 'value-v',
'Authorization': 'Bearer ' + token
},
body: companyName
})
本文标签： javascriptfetch() does not send headersStack Overflow
版权声明：本文标题：javascript - fetch() does not send headers? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736841031a1955099.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
X-My-Custom-HeadernorAuthorization. Now the remaining questions are why? And how to fix it? – Rasto Commented Aug 10, 2017 at 16:45