2017-05-03 85 views
7

Używamy appios w aplikacji vue.js, aby uzyskać dostęp do funkcji Azure. Teraz kupujemy ten błąd:Cors z funkcją Azure z localhost (nie CLI)

No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8080' is therefore not allowed access. 

Staramy się ustawić nagłówki odpowiedzi w funkcji w ten sposób:

context.res = { 
     body: response.data, 
     headers: { 
      'Access-Control-Allow-Credentials': 'true', 
      'Access-Control-Allow-Origin': 'http://localhost:8080', 
      'Access-Control-Allow-Methods': 'GET', 
      'Access-Control-Request-Headers': 'X-Custom-Header' 
     } 
     } 

ktoś napotykamy ten błąd?

+0

czy CORS jest włączony na serwerze obsługującym twój kod API? – victor

+0

Nie jesteś pewien co masz na myśli. Używamy funkcji Azure, więc nie konfigurujemy serwera. – steverb

+0

, więc zasób żądany z Azure nie jest skonfigurowany z tym nagłówkiem "Access-Control-Allow-Origin". Na przykład, jeśli ten nagłówek został ustawiony przez serwer, taki jak ten "Access-Control-Allow-Origin": www.google.com, oznaczałoby to, że ta funkcja lazury umożliwia żądanie pochodzić z google. – victor

Odpowiedz

8

Mamy to działa. To była konfiguracja w naszej funkcji Azure. Przechodzisz do "Cech platformy", a następnie "CORS". Dodaliśmy http://localhost:8080 do listy "Allowed Origins", a następnie wszystko działało.

1

Aby ustawić działanie CORS lokalnie, gdy nie korzystasz z interfejsu CLI i używasz kodu Visual Studio/VS - musisz dodać plik local.settings.json do projektu, jeśli go tam nie ma.

Upewnij „Kopiuj do wyjścia bezpośrednio” na „skopiować jeśli nowsze”

local.settings.json settings

Następnie w „local.settings.json” można dodać CORS": "*" te następujące ustawienia

 { 
    "IsEncrypted": false, 
    "Values": { 

    }, 
    "Host": { 
    "LocalHttpPort": 7071, 
    "CORS": "*" 
    } 
} 

Więcej informacji: https://docs.microsoft.com/en-us/azure/azure-functions/functions-run-local