Warm tip: This article is reproduced from serverfault.com, please click
angular azure-functions cors

Azure Function Cors with AAD

发布于 2020-11-30 11:22:26

I'm having a strange problem with CORs on my Azure Functions App

I currently have an Azure Function App, that is secured by Azure Active Directory. This API the provides data to an authenticated SPA, written in Angular 7 and uses the MSAL (1.4.1) library for authentication. The SPA is hosted on an Azure Storage Accounts static website and is matched to a custom domain with a CDN.

I have a similar set up on 2 other sites and they work great, only difference is authentication, but I don't think that is the issue as I can login ok and access graph endpoints.

The site works great running locally but fails when I run in production (the static website).

This is my CORS page:

Cors page

Yet this is my error:

Access to XMLHttpRequest at 'https://login.windows.net/GUID/oauth2/authorize?response_type=id_token&redirect_uri=https%3A%2F%2Forpheusapiv2.azurewebsites.net%2F.auth%2Flogin%2Faad%2[CODE]' (redirected from 'https://orpheusapiv2.azurewebsites.net/api/v2.0/FUNCTION_NAME') from origin 'https://orpheus.langladecapital.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Adding https://login.windows.net to the CORS list doesn't help and nor does just accepting a wildcard ("*")

Any ideas?

Questioner
Chris A
Viewed
11
分享
Jim Xu 2020-12-01 13:15:24

The CORS setting just can be used to fix the cors issue about calling Azure function from your single page application. But if you have configured App Service authentication for your Azure function app, you also face the cors issue about calling AD login URL from your single application. The setting cannot fix it. Regarding how to fix the issue, you can use Microsoft Authentication Library (MSAL) for JavaScript to integrate Azure AD into your single application. Then you can get access token and call Azure function. For more details, please refer to the blog.

Chris A 2020-12-01 09:05:35

Thanks Jim, I'm using MSAL 1.4.1 already?

Jim Xu 2020-12-01 09:12:17

@ChrisA Since you use angular, you can directly use package @azure/msal-angular to integrate Azure AD : github.com/AzureAD/microsoft-authentication-library-for-js/tree/….

Chris A 2020-12-01 19:35:03

It wasn't the fix but it led me to try and push the sample to my production site which worked and then I realised I had some formatting bugs in my set up code!

热门帖子

1
卷死同行 gpt-4o 模型 1.4 折中转 接近官网 3.5 的价格！
2
各位大佬好，我是一名大学生，想请教一下大家有没有什么适合大学生的赚钱小项目？我深知赚钱不易，所以想在不影响学业的前提下，找一些小项目来赚点零花钱。希望各位大佬能不吝赐教，分享一些你们的经验和建议。谢谢大家啦！
3
虚心求教，数据量上亿的爬虫数据用什么该用什么数据库呢
4
联通推出了更便宜的 eSIM iPad 套餐
5
坐标深圳，收台主机，不急
6
google doc如何快速插入日期时间？
7
最近三年面了三百多人，给程序员和面试官们分享一下我的感受
8
求助-我想低成本批量搭建美国 ip 的 socks5 代理，有什么好的方式吗？
9
7 年 iOS， 2 年 Java
10
该换手机了，消息推送延时短的手机有哪些呢？

热门github

1
Implementation of paper - YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information
2
A Windows and Office activator using HWID / Ohook / KMS38 / Online KMS activation methods, with a focus on open-source code and fewer antivirus detections.
3
Get up and running with Llama 2, Mistral, Gemma, and other large language models.
4
该项目可以让你通过订阅的方式使用Cloudflare WARP+，自动获取流量。This project enables you to use Cloudflare WARP+ through subscription, automatically acquiring traffic.
5
Multi functional app to find duplicates, empty folders, similar images etc.
6
Xray panel supporting multi-protocol multi-user expire day & traffic & ip limit (Vmess & Vless & Trojan & ShadowSocks & Wireguard)
7
The Free Software Media System
8
lightweight, standalone C++ inference engine for Google's Gemma models.
9
📚 Freely available programming books
10
A collective list of free APIs
11
1️⃣🐝🏎️ The One Billion Row Challenge -- A fun exploration of how quickly 1B rows from a text file can be aggregated with Java
12
🎓 Path to a free self-taught education in Computer Science!
13
Curso para aprender el lenguaje de programación Python desde cero y para principiantes. 75 clases, 37 horas en vídeo, código, proyectos y grupo de chat. Fundamentos, frontend, backend, testing, IA...
14
This repository contains System Design resources which are useful while preparing for interviews and learning Distributed Systems
15
Mamba is a new state space model architecture showing promising performance on information-dense data such as language modeling, where previous subquadratic models fall short of Transformers. It is based on the line of progress on structured state space models, with an efficient hardware-aware design and implementation in the spirit of FlashAttention.