1

I've got a simple localhost server which runs fine from my browser. I provide it a key "name" and value, it returns "Hello " + the value. For example, if I open a browser and enter http://localhost:7071/api/Function1?name=foo the returned page has "Hello foo".

I put this into Postman, and again it runs fine and returns "Hello foo". Then I got the Javascript code generated by Postman which was ...

var settings = { "async": true, "crossDomain": true, "url": "http://localhost:7071/api/Function1?name=dog", "method": "POST", "headers": { "cache-control": "no-cache" } }

    $.ajax(settings).done(function (response) {
        showNotification("response", response);
    })

    .fail(function (jqXHR, textStatus, errorThrown) {
        showNotification("error", errorThrown);
    });

I put this code into a Visual Studio 2017 project and tried to run it and it doesn't work. It returns the helpful error "error".

When using PostMan the server returns the following on a successful call ...

Debugger listening on [::]:5858 [7/4/2019 7:49:55 PM] Executing HTTP request: { [7/4/2019 7:49:55 PM] "requestId": "647e0e52-0320-4999-ba2f-25ae7d960fc7", [7/4/2019 7:49:55 PM]
"method": "POST", [7/4/2019 7:49:55 PM] "uri": "/api/Function1" [7/4/2019 7:49:55 PM] } [7/4/2019 7:49:55 PM] Function started (Id=c92f8dde-722a-4194-8661-d39c9826e137) [7/4/2019 7:49:55 PM] Executing 'Function1' (Reason='This function was programmatically called via the host APIs.', Id=c92f8dde-722a-4194-8661-d39c9826e137) [7/4/2019 7:49:55 PM] C# HTTP trigger function processed a request. [7/4/2019 7:49:55 PM] Function completed (Success, Id=c92f8dde-722a-4194-8661-d39c9826e137, Duration=397ms) [7/4/2019 7:49:55 PM] Executed 'Function1' (Succeeded, Id=c92f8dde-722a-4194-8661-d39c9826e137) [7/4/2019 7:49:55 PM] Executed HTTP request: { [7/4/2019 7:49:55 PM] "requestId": "647e0e52-0320-4999-ba2f-25ae7d960fc7", [7/4/2019 7:49:55 PM]
"method": "POST", [7/4/2019 7:49:55 PM] "uri": "/api/Function1", [7/4/2019 7:49:55 PM] "authorizationLevel": "Anonymous", [7/4/2019 7:49:55 PM] "status": "OK" [7/4/2019 7:49:55 PM] }

On an unsuccessful call, from my Visual Studio project I get this response from the server.

> [7/4/2019 7:51:57 PM] Executing HTTP request: { [7/4/2019 7:51:57 PM] 
> "requestId": "ae192682-7fa2-41ba-97a9-6c0588abd412", [7/4/2019 7:51:57
> PM]   "method": "OPTIONS", [7/4/2019 7:51:57 PM]   "uri":
> "/api/Function1" [7/4/2019 7:51:57 PM] } [7/4/2019 7:51:57 PM]
> Executed HTTP request: { [7/4/2019 7:51:57 PM]   "requestId":
> "ae192682-7fa2-41ba-97a9-6c0588abd412", [7/4/2019 7:51:57 PM]  
> "method": "OPTIONS", [7/4/2019 7:51:57 PM]   "uri": "/api/Function1",
> [7/4/2019 7:51:57 PM]   "authorizationLevel": "Anonymous", [7/4/2019
> 7:51:57 PM]   "status": "NotFound" [7/4/2019 7:51:57 PM] }

I've tried about a dozen variations and this is the closest I've gotten. Not sure if it matters, but the server is a Microsoft Function written in C#.

I've read a lot about CORS but this is all running on local host. Although, the javascript client is in Excel (part of Office Javascript) but my understanding is that internally Excel is using IE to process Javascript code.

EDIT and Answer

This post was marked as a duplicate. While this is true here are some tips for anyone else who is dealing with Azure functions and/or Office Javascript.

The first key concept is that even if the server (Azure function) and the client (Excel in my case) are both running on local host, you still have to deal with CORS. I assumed this wasn't true, I was wrong.

  1. Testing Azure functions running on http://localhost require modification to the local.settings.json file. see https://github.com/Azure/azure-functions-core-tools/issues/133

  2. Enabling CORS on Azure is required, see https://docs.microsoft.com/en-us/azure/azure-functions/functions-how-to-use-azure-function-app-settings.

2b. While enabling CORS is easy, if you want to run your client from localhost but your Azure function from Azure (i.e. not local host), you must add the this url to CORS per the instructions in 2 above ... https://localhost:XXXXX where XXXXX is the clients port on your local machine. Finding that was a challenge. I accomplished this by running the Azure function in local host, setting a break point after the request, and then it shows up under "properties" as "Origin: https://localhost:XXXXX".

Philip
  • 68
  • 5
  • `crossDomain` is really only for testing and does very little. If request is to a different domain or port then you probably need to implement ***CORS*** server side and read up on how it works. Also time to read up on how to use error handlers and how to use browser dev tools to inspect requests – charlietfl Jul 04 '19 at 20:08
  • This kind of error is usually easier to debug if you read the error messages in the browser's developer tool console. – Quentin Jul 04 '19 at 20:29

0 Answers0