8

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

Trần Kim Dự
  • 5,872
  • 12
  • 55
  • 107

1 Answers1

5

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())
    });
KevBot
  • 17,900
  • 5
  • 50
  • 68
  • I have set that option on server (I'm using rails), but no work. Moreover, I think request header that I saw in chrome doesn't depend on server (because it has been sent before come server). – Trần Kim Dự May 02 '17 at 09:33
  • 2
    @TrầnKimDự, I did some more testing on this, try changing the mode of the request to either `cors`, or `same-origin`. When I change it to either one of those, I can see the headers in the network tab in Chrome. – KevBot May 02 '17 at 14:53
  • thanks so much. changing from "no-cors" to "cors" works for me. Also I need to do 2 things: 1. change on server (as your answer) 2. change from "no-cors" to "cors". – Trần Kim Dự May 02 '17 at 17:37