1

I ham trying to make a request to a REST api. It is a CORS request. My frontend : Angular 1.5 (localhost:3000) My Backend : Django (*****.ddns.net)

So I am using a service ( made by someone who doesn't want to share the code :( ), that is doing a OPTIONS request before the real request (preflight). To be precise, the call is made through the resolve option of UI-router state definition. Django has CORS to allow *.

This is the error that i get in google chrome :

XMLHttpRequest cannot load https://****.net/api/myprofile. The request was redirected to 'https://*****.net/punchclock/api/myprofile/', which is disallowed for cross-origin requests that require preflight.

If I do a classic $http request in a controller, it is working.

This is the request recieved my django :

+6655:5740d0f9:10|
OPTIONS /punchclock/api//myprofile HTTP/1.0|
Host:*****.net|
Connection:close|
Pragma:no-cache|
Cache-Control:no-cache|
Access-Control-Request-Method:GET|
Origin:http%3a//localhost%3a3000|
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36|
Access-Control-Request-Headers:accept, authorization|
Accept:*/*|
Referer:http%3a//localhost%3a3000/dashboard|
Accept-Encoding:gzip, deflate, sdch|
Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4,es;q=0.2
-6655:5740d0f9:10

And this is the response i get if I do it with postman (it is working with postman when i do an OPTIONS request)

Access-Control-Allow-Headers →x-requested-with, content-type, accept, origin, authorization, x-csrftoken
Access-Control-Allow-Methods →GET, POST, PUT, PATCH, DELETE, OPTIONS
Access-Control-Allow-Origin →*
Access-Control-Max-Age →86400
Allow →GET, HEAD, OPTIONS
Connection →keep-alive
Content-Type →application/json
Date →Sat, 21 May 2016 21:15:02 GMT
Server →nginx/1.6.2
Transfer-Encoding →chunked
Vary →Accept
X-Frame-Options →SAMEORIGIN

I think it is an issue on Django's side, I don't know. If you have any idea... (I need to learn a lot about CORS...)

NOaMTL
  • 193
  • 1
  • 4
  • 13

2 Answers2

4

Make sure the URL you are targeting is correctly constructed and that there is a trailing slash at the end of the route you are calling. As mentioned here. So instead of this

'http://localhost:5000/auth'

you would call this

'http://localhost:5000/auth/'

Hope this helps.

Rohit Sharma
  • 3,304
  • 2
  • 19
  • 34
user42488
  • 1,140
  • 14
  • 26
1

It is probably because some of the headers you are sending are not allowed. To make sure, just go to google chrome debugger and copy the request headers and send them using postman. If it fails eliminate the headers until you find out which one is not allowed.

There is a similar answer here that may help. Specifically where it says

According to the W3 CORS Spec Section 6.2 Preflight Requests, the preflight must reject the request if any header submitted does not match the allowed headers.

Community
  • 1
  • 1
Japheth Ongeri - inkalimeva
  • 4,909
  • 6
  • 29
  • 46
  • I did what you said. First, I checked the chrome debugger, and this is what i got : `The first request, the OPTIONS one returns a 200 Request Method:OPTIONS Status Code:200 OK Remote Address: **.***.***.***:***` But the second one : `Request URL:https://*****.ddns.net/api/myprofile Request Method:GET Status Code:301 Moved Permanently Remote Address:**.***.***.***:***` Also I tried to add all the headers using postman(+ the interceptor pluggin) and it returns a 200 also. – NOaMTL May 22 '16 at 09:53
  • Then your problem is not CORS if you are getting 200 from OPTIONS, 301 on the real request is a redirect i think, so the server side guy should be able to help you there. Or make a second request to the new url when you get a redirect – Japheth Ongeri - inkalimeva May 22 '16 at 09:56
  • I tried to use all the headers and simulate the get from postman, and it is a 200... I am confused. And i also tried to do the OPTIONS and the GET on the redicted url directly and I have the same issue. – NOaMTL May 22 '16 at 10:01
  • UPDATE: I found an issue about the redirection, if I call the api directly through my angular app it is working now, so the issue is when there is a redirection in the request. According to another [post](http://stackoverflow.com/questions/24484427/cors-no-access-control-allow-origin-header-is-present-yet-there-is) the issue could be related to this rediction. I will investigate. Thank you @inkalimeva – NOaMTL May 22 '16 at 10:21