Preflight, or CORS error, on every request

Question

I've been struggling with CORS for a substantial amount of time, and still no closer to a full understanding.

My simplest example is using Wunderlist API -

Using the below code:

 var settings = {
  "async": true,
  "crossDomain": true,
  "url": "http://a.wunderlist.com/api/v1/lists",
  "method": "GET",
  "headers": {
    "x-client-id": "{ID}",
    "x-access-token": "{TOKEN}",
    "cache-control": "no-cache"
  },
  "data": "{\n\t\"revision\": 1,\n\t\"completed\": true\n}"
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

Within Postman/Fiddler will return results. However, throwing it onto a basic site, or Codepen will either return a 405, a Pre-flight Warning or an Invalid Request

I've loosely come to the understanding that you allow it within your server side, but I have to assume that not every single site out there allows for Postman etc to connect, nor for every vendor I sign up with it allow my domain.

How is it you work on bypassing the CORS Compliance within an API Call then? I've tried a lot of things I've read, including crossDomain, Cross-Origin Header, etc and always get same result.

Any insight?

@Mike'Pomax'Kamermans - incorrect - custom headers trigger preflight — Jaromanda X, Dec 21 '16 at 00:29
@JaromandaX please cite a spec that dictates this, because I am not aware of that restriction, and would like to see an authoritative link that confirms your claim. — Mike 'Pomax' Kamermans, Dec 21 '16 at 00:30
@Mike'Pomax'Kamermans - is MDN authoritative enough? https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests — Jaromanda X, Dec 21 '16 at 00:31

cchamberlain · Accepted Answer · 2016-12-21T04:15:15.683

16

The reason it's being flagged for preflight is the extra headers you are sending. GET requests do not have to use a preflight request unless you are passing custom headers. You have two options:

The simplest solution is to remove the custom headers you are attempting to send, and the request should no longer get flagged as requiring CORS preflight.
If you are hosting the server code, you can check the incoming request (server-side) to see if it has request method OPTIONS. If so, you know this is the preflight and should respond with a response that tells the client what headers are acceptable. To allow all custom headers, the preflight response should contain a 'Access-Control-Request-Headers': '*' response header.

Per https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS:

UPDATE: Per https://developer.wunderlist.com/documentation/concepts/authorization you have to register your application for it to be able to talk to them. Somewhere in that process they may automatically start sending preflight requests for your domain or allow you to set the headers.

edited Dec 21 '16 at 04:15

answered Dec 21 '16 at 00:22

cchamberlain

17,444
7
59
72

Assuming wunderlist supports CORS requests at all – Jaromanda X Dec 21 '16 at 00:28
1

@JaromandaX - If they require an `x-access-token` header, and expect their api to be usable, they should support CORS. – cchamberlain Dec 21 '16 at 00:29
1

still an assumption :p – Jaromanda X Dec 21 '16 at 00:30
@cchamberlain Appreciate the link. It's actually being referenced to bounce back to my localhost:8080 source, which is what's being rejected. I've modified the base, but this seems like what I need. Thanks. – DNorthrup Dec 21 '16 at 03:53
2

Might be they don't trust localhost. Have you tried different browsers? – cchamberlain Dec 21 '16 at 04:14
Did you find the solution for the wunderlist api? – Anton Shkurenko Jan 21 '18 at 21:02
1

What I learned from this answer is the preflight is a check sent by the browser based on the request you're trying to make before it's sent. So if it fails you should look at the request you're making and change it to what the server allows. I removed a header in my request that wasn't allowed and the request completed. (Hi future me!) – SneakyLenny Jul 28 '22 at 12:53

Preflight, or CORS error, on every request

1 Answers1