fetch() always results in "type: 'opaque'". But I can use Postman on my endpoint successfully

Question

I must be really terrible at JavaScript but I've been struggling with this for a few days and I've not made any progress.

To make a long story short, I'm trying to work with UPS's REST API. I can do it with Postman and I can do it with PowerShell without any problems. JavaScript is a completely different story and I'm getting nowhere.

I've tried both XMLHttpRequest and fetch() and I've tried so many different combinations of things I can't begin to list them all.

Below is my JS function in my web app (it's triggered onchange of a field). The JS function makes a call to an Azure Function (the Azure Function works from Postman and from PowerShell.)

function getUpsShipTime() {
    var jsonBody = {
        "DeliveryDate": "2017-06-06",
        "ShippingCode": "GND",
        "ShipFrom": {
            "Address": {
                "StateProvinceCode": "CA",
                "CountryCode": "US",
                "PostalCode": "90210"
            },
        },
        "ShipTo": {
            "Address": {
                "StateProvinceCode": "FL",
                "CountryCode": "US",
                "PostalCode": "32830"
            }
        }
    }

    var uri = "https://MyAzureFunction.azurewebsites.net/api/HttpTriggerPowerShell1?code=MyAuthCode=="

    var req = new Request(uri, {
        method: 'post',
        mode: 'no-cors',
        headers: {
            'Content-type': 'application/json'
        },
        body: JSON.stringify(jsonBody)
    });
    fetch(req)
        .then(function (response) {
            console.log(response);
            return response.blob();
        }).then(function (blob) {
            console.log(blob);
        });
}

When the function runs I get the following:

Here's what I get from Postman:

What am I doing wrong?

score 5 · Accepted Answer · answered May 18 '17 at 21:56

5

You request the URL in no-cors mode, which is why opaque response is returned. Effectively, that's what you asked for.

Instead, I suggest you configuring CORS for Azure Function as described here and changing mode to cors.

answered May 18 '17 at 21:56

Mikhail Shilkov

34,128
3
68
107

1

Could you explain why this works with Postman so easily? Is there an easier way to do this or are fetch() and XMLHttpRequest my only options? Nevertheless, I'll try to get this CORS thing working. If it works it works. – Chris76786777 May 18 '17 at 22:05
This worked. Can't believe I spent so much time on this. Ugh. – Chris76786777 May 18 '17 at 22:11
@Mardoxx I know that. What, technically, is different? Something that's obvious to you might not be obvious to others. – Chris76786777 May 19 '17 at 16:29
3

You are absolutely right, I say the same thing to others on SO - I have become what I detest and I apologise. From what I understand CORS is for browsers to implement to prevent browser based attacks! E.g. dodgywebsite.ru performing a post of `amount=100;account=somethief;` to bank.com/transfermoney. It is wholly thwarted by XSS exploits though. This isn't as obvious as it could be in many CORS tutorials or blog posts. – Mardoxx May 19 '17 at 19:50
2

This is an issue with cookie or basic authentication- as browsers automatically send auth information do the servers so a post from dodgysite.ru to bank.com would be the same as a post from bank.com to bank.com - wothout CORS protection! @Chris76786777 – Mardoxx May 19 '17 at 19:53
Thanks for the apology and additional comments. :) It's the second one that makes it more clear. – Chris76786777 May 19 '17 at 22:28
And how configure with symfony4 ? I already use nelmio_cors that it's not work – ALFA Apr 17 '19 at 10:42

fetch() always results in "type: 'opaque'". But I can use Postman on my endpoint successfully

1 Answers1