I have created an Azure Function API by following https://learn.microsoft.com/en-us/azure/developer/javascript/tutorial/azure-function-cosmos-db-mongo-api?tabs=visualstudiocode tutorial, but whenever I try posting data to it via my react-app using
axios.post(url, postData)
I get CORS errors, do I need to change anything in index.ts in my API folder?
If you're running the function app locally, there's an option to configure CORS in local settings file local.settings.json
{
"Values": {
},
"Host": {
"CORS": "*"
}
}
For the function app in azure, configure CORS policies in portal.
Related
I am currently trying to use Azure SignalR in my Blazor app but I am currently experiencing difficulties which what looks like authentication errors.
I have set it up in my Program.cs file to include the Azure SignalR:
builder.Services.AddSignalR().AddAzureSignalR();
I have then added my connection string into the appsettings.json which is validated as when running the application I get the following message:
Hub is now connected to '(Primary)xxx.service.signalr.net')
I have mapped my hub within my Program.cs
app.MapHub<MessageHub>('/messagehub');
However when I try to connect to the hub I get the following issue:
Invalid negotiation response received.
I believe this to be me having authentication within my application and this error is being produced as a result of an unauthenticated error.
However, how can I authenticate with Azure and use that hub?
I have followed the MSDOC to use Azure SignalR services in Blazor App.
I hope you followed the same way. If not follow the below workaround
use latest Microsoft.Azure.SignalR package in your application
I have added the connection string of azure SignalR in a appsettings.json file
"Azure": {
"SignalR": {
"Enabled": true,
"ConnectionString": "<SignalR Connection String>"
}
},
# use ServerStickyMode to avoid Inconsistent UI state management. If you are using many servers
"Azure:SignalR:ServerStickyMode": "Required"
I am using endpoints to Map the Hub.
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/Fallback page");
endpoints.MapHub<YourHub>('/YourHub');
});
Add the Azure SignalR service in a ConfigureServices
public void ConfigureServices(IServiceCollection services) {
services.AddSignalR().AddAzureSignalR();
...
}
After configuring these you can be able to authenticate your hub.
If still facing issue add the below line of code in your ConfigureServices to know the detailed error.
services.AddSignalR(
s =>
{
s.EnableDetailedErrors = true;
});
Refer SO thread for similar kind of issue
I have my Azure function which is running locally, I am looking for a way where I can set CORS in my local.
I went through the below Microsoft Documentation but couldn't able to achieve it.
To Enable CORS in your function app running locally in your machine
open the local.settings.json file (or create one if it doesn't exist. see) in your function app root folder.
Then add (or append) the following to allow all :
{
//Your other configs here
"Host": {
"CORS": "*"
}
}
Or if you have a specific URL & port you want to whitelist
{
//Your other configs here
"Host": {
"CORS": "http://localhost:12345"
}
}
To Enable CORS in your function app hosted in Azure :
Go to your function app instance via the azure portal, then click on the "CORS" left menu option under the API section.
You can configure CORS for your function app here.
Azure docs : https://learn.microsoft.com/en-us/azure/azure-functions/functions-how-to-use-azure-function-app-settings?tabs=portal#cors
I'm new with azure functions and azure as whole.
I'm using azure functions for interacting with a SignalR service for usage in a xamarin forms app. I borrowed the azure function code from docs.MSDocs on serverless signalR service
Worked well in local (tested the web client provided in the docs, And also a simple console app).
But when the function was moved to azure. Initially I faced CORS error fixed those and then faced 502. Could not debug or find the root cause. After few hours of browsing found that azure itself provides a template for signalR serverless connection.
Used the template, configured the app settings with signalR endpoints (I have set the app setting for AzureSignalRConnectionString).
Still facing 502 error, . How can I get it to work? Or How do I find out the root cause for the failure.
Negotiate function code:
index.js
module.exports = async function (context, req, connectionInfo) {
context.res.body = connectionInfo;
};
Function.json
{
"bindings": [
{
"authLevel": "anonymous",
"type": "httpTrigger",
"direction": "in",
"methods": [
"post"
],
"name": "req"
},
{
"type": "http",
"direction": "out",
"name": "res"
},
{
"type": "signalRConnectionInfo",
"name": "connectionInfo",
"hubName": "messaage",
"connectionStringSetting": "AzureSignalRConnectionString",
"direction": "in"
}
]
}
SignalR Service needs a URL to access Function App when you're using SignalR Service trigger binding.
The URL format: <Function_App_URL>/runtime/webhooks/signalr?code=<API_KEY>. Explanation: The Function_App_URL can be found on Function App's Overview page and The API_KEY is generated by Azure Function. You can get the API_KEY from signalr_extension in the App keys blade of Function App.
And if you are very new to this, here is a step by step article to follow: https://github.com/aspnet/AzureSignalR-samples/tree/master/samples/BidirectionChat
I created an azure functions premium tier to be able to have proxies on it but when trying to add a proxy I cantThis is what im getting right now !!
As Bowman mentioned in the comments, Azure function based on Linux systems cannot edit proxy on the Azure portal.
You need to create a proxies.json locally and deploy it to the Azure portal. the proxies.json looks like this:
{
"$schema": "http://json.schemastore.org/proxies",
"proxies": {
"proxy1": {
"matchCondition": {
"methods": [ "GET" ],
"route": "/api/{test}"
},
"backendUri": "https://<AnotherApp>.azurewebsites.net/api/<FunctionName>"
}
}
}
Note:
proxies.json is located in the root of a function app directory. For more details, you can refer to this official documentation.
In my app's secrets.json file, I have the following section.
"Serilog": {
"WriteTo": [
{
"Name": "AzureTableStorage",
"Args": {
"storageTableName": "Logging",
"connectionString": "DefaultEndpointsProtocol=xxxxxxxxxxx"
}
}
]
}
I am attempting to deploy to Azure and have added the keys to my app service's configuration like this.
Serilog__WriteTo__Name
Serilog__WriteTo__Args__storageTableName
Serilog__WriteTo__Args__connectionString
However, the application will not start (just shows an errror: "If you are the application administrator, you can access the diagnostic resources.") if I use either of the two longer keys. I have another setting named CosmosConnectionSettings__ContainerName which works fine, so it seems to be a problem with the nesting rather than they key lengths.
The app service is configured to use Linux.
Is there a better way to approach this, and is this limitation documented anywhere?
I think it's not the nesting's fault.
I have test it on my side, here is my secrets.json file:
{
"Serilog": {
"WriteTo": {
"Name": "AzureTableStorage",
"Args": {
"storageBlobName": "1.jpg",
"connectionString": "DefaultEndpointsProtocol=https;AccountName=XXX;AccountKey=XXX;"
}
}
}
}
And I write the value to the endpoint page like this:
Here is the Appsettings in my configuration on portal:
The Appsettings I set works well on azure web app.
My suggestion is:
Check how you use the key AzureTableStorage and connectionString in your scripts.
Test your project on IIS. Actually if it works well on IIS, it should work well on Azure.