Javascript Fetch API: header params not working

fetch-api, javascript

Solution

You are using it correctly, but you have to tell your backend service to allow custom headers (`X-`). For example, in PHP:

header("Access-Control-Allow-Headers: X-Requested-With");

Also, your custom headers should be prefixed with `X-`. So you should have:

'X-Platform-Version': '1'

And one last thing, your `mode` needs to be `cors`.

You can see that standard headers are being sent with the following code. take a look at the network tab to see the standard request headers.

var header = new Headers();

// Your server does not currently allow this one
header.append('X-Platform-Version', 1);

// You will see this one in the log in the network tab
header.append("Content-Type", "text/plain");

var myInit = {
    method: 'GET',
    headers: header,
    mode: 'cors',
    cache: 'default'
}

fetch('http://localhost:3000/api/front_end/v1/login', myInit)
    .then(res => {
        console.log(res.text())
    });

Problem

This is my sample request: ``` var header = new Headers({ 'Platform-Version': 1, 'App-Version': 1, 'Platform': 'FrontEnd' }); var myInit = { method : 'GET', headers: header, mode : 'no-cors', cache : 'default' } fetch('http://localhost:3000/api/front_end/v1/login', myInit) .then(res => { console.log(res.text()) }) ``` When I debug, I see that this request is sent successfully to server, but server hasn't received header params (in this case is `Platform-Version`, `App-Version` and `Platform`). Please tell me which part do I config wrong. thanks

Original source