CORS with Azure function from localhost (not CLI) - azure

We are using axios in a vue.js app to access an Azure function. Right now we are getting this error:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:8080' is therefore not allowed access.
We are trying to set response headers in the function this way:
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'
}
}
Has anyone run across this error?

To set CORS working locally when you are not using CLI and you are using Visual Studio/ VS Code - you need to add local.settings.json file into your project if it's not there.
Make sure "Copy to output directly" set to "copy if newer"
Then in your "local.settings.json" you can add CORS": "*" like so:
{
"IsEncrypted": false,
"Values": {
},
"Host": {
"LocalHttpPort": 7071,
"CORS": "*"
}
}
More info:
https://learn.microsoft.com/en-us/azure/azure-functions/functions-run-local

For v3+ the following works:
p.s. note that location of Hosts is on the same level as Values and not under it (as in the answer by azadeh-khojandi https://stackoverflow.com/a/48069299/2705777)
Configure CORS in the local settings file local.settings.json:
{
"Values": {
},
"Host": {
"CORS": "*"
}
}

We got it working. It was a configuration in our Azure function. You go to "Platform Features" then "CORS". We added http://localhost:8080 to the list of "Allowed Origins" and then everything worked.
Elaboration For Production Environment Issues
I was having a problem on localhost, and on production (firebase hosted), trying to get my JavaScript Web app to interact with an Azure Function.
Cross-Origin Resource Sharing (CORS) allows JavaScript code running in a browser on an external host to interact with your backend.
In Azure Functions, click the features tab, and click the CORS block under "networking and security".
Add your domain as an allowed origin and hit save. This will fix the issue.

Had same problem. On root of backend project, there's a file local.settings.json.
Added "CORS": "*" and "CORSCredentials": false in that file (following is the example), did mvn clean package -DskipTests=true on root, and mvn azure-functions:run -DenableDebug on the azure function directory.
{
"IsEncrypted": false,
"Values": {
"FUNCTIONS_WORKER_RUNTIME": "<language worker>",
"AzureWebJobsStorage": "<connection-string>",
"AzureWebJobsDashboard": "<connection-string>",
"MyBindingConnection": "<binding-connection-string>"
},
"Host": {
"LocalHttpPort": 7071,
"CORS": "*",
"CORSCredentials": false
},
"ConnectionStrings": {
"SQLConnectionString": "<sqlclient-connection-string>"
}
}
Reference:
https://learn.microsoft.com/en-us/azure/azure-functions/functions-run-local?tabs=macos

For those of you who are doing all of the above, but still not getting anything to work, it could be that your local.settings.json file is completely ignored. I don't know if this is because I'm using v3.
Go to Properties of your Project -> Debug -> Application arguments ->
host start --build --port 7071 --cors * --pause-on-error
Start your application

I had the same issue and the culprit was actually a typo in the Blazor-embedded-URI which Firefox displayed as a CORS error. Solution was just to realize that it had nothing to do with CORS and fix the mis-typed URI.

You can enable the CORS from hosted environment in function app to add the web app URL refer the below screenshot.
Enable CORS in Function app
Note: TO allow all mark as "*"

Please note that CORS policies should be activated on the server where the resource is hosted.
In my case, despite I was testing my API in local, I was accessing a resource on the real blob storage, where no CORS policy was set.
Activating the CORS policy on the blob storage solved the issue, in my case.

Related

How to disable App Service authentication for a path?

I enabled identity federation V2 for an App Service that hosts a single page app. This works fine but now I need to disable it again for routes that start with /.well-known/ because that's where I store files that don't require authentication, e.g. apple-app-site-associations.
In previous versions, I was able to upload an authorization.json file to my App Service to disable authentication for this path, but this no longer works?
{
"routes": [
{
"path_prefix": "/",
"policies": {
"unauthenticated_action": "RedirectToLoginPage"
}
},
{
"path_prefix": "/.well-known/",
"policies": {
"unauthenticated_action": "AllowAnonymous"
}
}
]
}
I'm still unsure why the old way of configuring path exclusions stopped working, but I figured out how to do it with V2 configuration.
First migrate to file-based configuration as documented here: https://learn.microsoft.com/en-us/azure/app-service/configure-authentication-file-based#enabling-file-based-configuration
In short, copy all config from Microsoft.Web/sites/<siteName>/config/authsettingsV2 to a file in your wwwroot folder, e.g. wwwroot/auth.json. This file will be accessible over HTTP so remove secrets from configuration as documented. Set platform.configFilePath to auth.json and restart the app service.
Once you've confirmed that everything still works with file-based configuration, you can add path exclusions to the configuration file.
{
"platform": {
"enabled": true
},
"globalValidation": {
...
"excludedPaths": [
"/.well-known/apple-app-site-association",
"/.well-known/assetlinks.json"
]
},
...
}
Restart the app service one more time for changes to take effect.
If you're trying this 12/2022, it seems that "configFilePath" is not working for quite some time (evidence)
If you change directly on Azure Resource Explorer, it works.

How to set X-Content-Type-Options on Azure App Service Linux?

I have an Angular2 web app deployed on Azure App Service Linux. I ran OWASP ZAP to attack my website and it alerted about X-Content-Type-Options Header missing. I was looking for the httpd file in etc/ to set X-Content-Type-Options = 'nosniff' but I couldn't find it. I assumed that the web app is running on Apache.
Reference:
The Anti-MIME-Sniffing header X-Content-Type-Options was not set to 'nosniff'. This allows older versions of Internet Explorer and Chrome to perform MIME-sniffing on the response body, potentially causing the response body to be interpreted and displayed as a content type other than the declared content type. Current (early 2014) and legacy versions of Firefox will use the declared content type (if one is set), rather than performing MIME-sniffing.
We solved the issue by having the two files ecosystem.config.js and serve.json be part of our deployed artifact.
ecosystem.config.js
// https://burkeknowswords.com/this-is-how-to-easily-deploy-a-static-site-to-azure-96c77f0301ff
// Use PM2 to serve files on Linux App Service
module.exports = {
apps: [
{
script: "npx serve -s"
}
]
};
serve.json
{
"headers": [
{
"source" : "**",
"headers" : [
{
"key" : "X-Content-Type-Options",
"value" : "nosniff"
},
// more headers

Angular-Error occurred while trying to proxy request /api/v0/dataservice/cluster/clusters from localhost:4300 to http://localhost:30510 (ECONNREFUSED)

I am working on Angular 6 application. I was try to run npm audit fix and npm audit fix --force to fix vulnerabilities. After that My application is not compile and working. So I delete package-lock.json, node modules folder and take old package.json file and install npm again.
Somehow I manage to compile and run the application but where I have api calls I am getting this error in browser
And in the terminal:
First time I am facing this type of issue So I have no idea about how to fix it.
Here is my proxy.config.json file where I found http://localhost:30510 url
{
"/api/v0/dataservice/*" : {
"target" : "http://localhost:30510",
"secure" : false,
"logLevel" : "debug"
}
}
I have try below solutions:
Replace localhost with [::1]
try to add
headers: {
"Connection": "keep-alive"
}
add "changeOrigin": true
but not work any above solution
Any help is appreciated. Thanks in advance.
Please try below proxy configuration:
{
"/api/v0/dataservice/*": {
"target": "http://localhost:5000",
"secure": false,
"changeOrigin": true,
"pathRewrite": {"^/api/v0/dataservice" : "/api/v0/dataservice"}
}
}
Also please check whether the backend server is currently working. This error generally occurs when the backend server is not up.

API in nodejs Port Issue

I've created an API in nodejs backend and frontend I used reactjs as I've connected the api to my form
it shows the error
"Could Not proxy request"
Check what is the error in Chrome developer tools. It is most probably CORS issue.
If you are using NodeJs, you can use below command.
res.header("Access-Control-Allow-Origin", "*");
But this will allow CORS for all port running on your machine.
I faced the same issue when using express. I resolved it as shown below :
TRY THIS OUT IN YOUR PACKAGE.JSON CONFIGURATION refereed from create-react-app
"proxy": {
"/api": {
"target": "https://localhost:5002",
"secure": false
}
},
Also try add CORS configuration to your node check this video

Angular HttpClient fails to proxy

I have a spring boot back-end api and I am trying to call a service for uploading or getting images from angular project. I have a standard proxy.conf.json file:
{
"/api": {
"target": "localhost:8080",
"secure": false,
"logLevel": "debug"
}
}
if my angular service is using Http(HttpModule) everything is ok, but since its deprecated and i want to do it the new way i am trying with HttpClient(HttpClientModule) but in log i am getting :
[HPM] Error occurred while trying to proxy request /upload/ from localhost:4200 to localhost:8080 (ENOTFOUND) (https://nodejs.org/api/errors.html#errors_common_system_errors)
and it is not working. On one try on a linux machine i got the same mistake but with (EINVAL). Can someone guide me what i am doing wrong ? Sorry if the question is stupid there are a few questions like this one but neither of their solutions does not seem to work in my case.
Try to set http protocol in front of the localhost link.
{
"/api": {
"target": "http://localhost:8080",
"secure": false,
"logLevel": "debug"
}
}

Resources