0

I am trying to use UPS's package rating API and I am able to get this working in Postman but not on a web browser. I understand postman doesn't worry about CORS.

I have this post request:

getRate() {
    return this.http.post(this.upsUrlTest, this.upsConfig, this.postOptions);
}

My 3 variables are:

upsUrlTest = 'https://wwwcie.ups.com/ship/1801/rating/Rate';
upsConfig = {...This is filled out and working in postman...}
postOptions = {
  headers: new HttpHeaders({
    transId: '0001',
    transactionSrc: '##########',  //Actual information is correct
    AccessLicenseNumber: '########',
    username: '#########',
    password: '#########',
    // These last two are where I believe the problem is
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': 'x-requested-with, x-requested-by',
  })
};

And I am getting this response: enter image description here

What's strange is that I get a 404 before I get the CORS issue. I'm not sure if I have this formatted incorrectly or if there's something else going on here.

Another note: I am running this angular project on localhost, but I get the same issue when I put this on my server.

Edit: Just because this has to do with CORS doesn't make it a duplicate for my situation. A link to the proposed original would have sufficed in this case.

ntgCleaner
  • 5,865
  • 9
  • 48
  • 86
  • are you sure the exact request works in postman? i suggest you to sort out the 404 first before investigating the cors issue. Some APIs do not set the Allow-Origin Header on Error Responses. So your CORS issue may not be a problem once you receive a statuscode of 2xx. You can try to make the same request through windows powershell. Open Chrome network tab in developer window, right click the request which resulted in 404 error. Select Copy, then powershell. Paste the content into powershell and see what the response is. – A.Winnen Apr 26 '19 at 18:07
  • @A.Winnen, I'm sure the exact response, minus the `Content-Type` and `Access-Control-Allow-Origin` (which, even when removed from the javascript gives me the same error) works just fine in postman. I've just tested even adding the content-type and origin and I still receive the correct response. I currently don't have access to a windows machine and powershell is above my paygrade unfortunately. I played around in terminal for a minute, but I need to test some more – ntgCleaner Apr 26 '19 at 18:19
  • you can also copy the request command for curl (bash) :P – A.Winnen Apr 26 '19 at 18:22
  • @A.Winnen, Aah that helps. When I `Copy all as cURL` I get back an html doc with the first line of the body saying `Error: CSRF token missing`. If I just use `Copy as cURL`, I am getting a 404 – ntgCleaner Apr 26 '19 at 18:27
  • inspect the curl command. Compare the curl command with your postman request. Check if URL and Body are equal in curl command and postman. Try to remove some headers one by one until it works. There must be something in that request the UPS API does not like. – A.Winnen Apr 26 '19 at 18:53
  • @A.Winnen, I will do some digging, thank you! – ntgCleaner Apr 26 '19 at 19:02

1 Answers1

1

Using Angular you need enable CORS policity in back-end/destination URL.

By default, in my projects with PHP I use this headers:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, PUT, DELETE, GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Content-Length, Accept-Encoding, Authorization, X-Requested-With");

Another interesting thing about the Angular, is that before doing the Http request, it does a function called 'preflight', which is nothing more than a check if the destination is OK to receive the request.

(Sorry for my bad English, I'm Brazilian and I'm taking the time to practice my language)

Rodrigo Roberto de Almeida
  • 93
  • 9
  • Thank you for your information, I will take a look into this for angular specifically. Also, Please _NEVER_ apologize for "poor english". Your english is better than most of the people I talk to daily in the U.S.! You are much farther ahead of the game than anyone I know! – ntgCleaner Apr 26 '19 at 18:06
  • Thanks a lot! And please, give me a feedback when try this solution :) – Rodrigo Roberto de Almeida Apr 26 '19 at 18:23
  • I am reading up on this and it seems I don't have much control over this. I can run it locally (I haven't tried yet) but wouldn't be able to do it in production because it's not my server... I'm not sure what to do! – ntgCleaner Apr 26 '19 at 18:30
  • I think one possible way to circumvent this would be to make the request as follows: Angular (http request) -> back-end in php (cURL request) -> external destination I do not know if it really works, I can not test at the moment – Rodrigo Roberto de Almeida Apr 26 '19 at 19:04
  • Funny, that's exactly what I'm working on now. I've already gotten a callback using PHP, now I just need to link the two! Thank you! – ntgCleaner Apr 26 '19 at 19:05