CORS Headers in Azure App Service running Express JS - node.js

I'm building a simple web application which has to Cross Origin Resource Sharing restricted to some sites. The app is running in the Azure cloud on an App Service. Right now I have set the CORS headers from both the Azure portal and the Express server app as a middleware in the following way:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
My question is, that can I remove the CORS headers from the Express App and use only the headers which are provided by the Azure App Service? Thanks.

Yes, definitely you can achieve it either by setting CORS headers from the Azure portal or by adding CORS headers from your App.
For other people’s convenience, here I also provide the following steps to set CORS header from the Azure portal.
Navigate to the Azure portal.
Navigate to your App Service.
Click CORS in the API menu.
Enter each URL in the empty ALLOWED ORIGINS text box. A new text box is created.
Click Save.

They don't recommend to use both

Related

Azure Functions: sudden CORS issue (after hours of copacetic development)

Getting this error "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource ..."
But I had been developing from my localhost:* just hours before. I did nothing to the application settings or CORS settings. Now I have a wildcard and it still doesn't work (above error).
I checked out {app}.scm.azurewebsites.net/Env.cshtml and I see:
...
APPSETTING_WEBSITE_CORS_SUPPORT_CREDENTIALS = True
...
WEBSITE_CORS_SUPPORT_CREDENTIALS=False
...
I don't know if these environment variables are correct or if they changed since my functions were actually working.
While I've found a solution, it probably makes sense to address this problem anyhow.
const proxy = require('express-http-proxy');
const app = require('express')();
const subdomain = '';
app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:1234');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
});
app.use('/', proxy(`https://${subdomain}.azurewebsites.net`));
app.listen('9091', () => {
console.log('Proxy on http://localhost:9091')
})
Then just pass in proxyUrl as a parameter if you want to preconfigure HATEOAS links.
I think that Azure App Service CORS is taking precedence over your application CORS settings. Quoting from another reply "If you enable one origin domain in App Service, and enable all domains in your Web API code your Azure API app will only accept calls from the domain you specified in Azure".
Here is the link to the other thread: Enable Access-Control-Allow-Credentials header in Azure website (Azure App Services)
I hope that you find this answer helpful :)

Express: does cors configuration depend on server TTL?

I've successfully deployed my Express API app to AWS elastic beanstalk. I have a React front end that is hosted on S3.
Both are on the same domain with the front end being at example.com & the API at api.example.com
Both have certificates and are secured.
const express = require('express');
const cors = require('cors')({
Origin: 'https://example.com'
});
// followed by required middleware
app.use(cors());
//followed by app constants
app.use((e, req, res, next) => {
res.header("Access-Control-Allow-Origin", "https://example.com");
res.header('Access-Control-Allow-Methods', 'DELETE, PUT, GET, POST');
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
if (e) {
console.log(e);
res.status(500).send(e.message);
}
next();
})
// followed by app routes
When I try and register a user on my site, I get the error:
Access to XMLHttpRequest at 'https://api.example.com/users/signup/' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
This topic has of course been covered multiple times on Stack Overflow (which I've gone through multiple solutions this morning), but my question has to do with the actual server where the API is being hosted.
In the hosted zone for api.example.com, it has a TTL of 172800(48 hours). Does this mean that my changes won't be reflected in that time? If that is the case, does this mean that every time you deploy code it resets the TTL?
I'm a front end dev working on a side project, so this really isn't my area of expertise. Any DevOps or BackEnd Devs have any ideas? Thanks in advance!
In the hosted zone for api.example.com, it has a TTL of 172800(48 hours). Does this mean that my changes won't be reflected in that time? If that is the case, does this mean that every time you deploy code it resets the TTL?
No.
The TTL is how long other DNS servers are expected to cache the DNS information (e.g. which server the domain name points to).
It has nothing to do with deployment of code.
Your problem is unrelated to that. I'd add some logging to the server-side code to see which routes and middleware were actually hit as well as monitoring the precise request and response you are getting in the Network tab of your browser.
There a preflight OPTIONS request can be made by the browser for the particular types of cross-domain requests. If the response on that request is not successful or doesn't have CORS headers you will also get such error.
So I suppose that you should add a route in your Express app to handle preflight requests and send back the same CORS headers or just use express-cors-middleware.

Fix CORS error on a webapp when you've already set the headers in your backend (Node.Js) and on Azure App Service [duplicate]

This question already has answers here:
No 'Access-Control-Allow-Origin' header with Microsoft Online Auth
(2 answers)
Enable CORS for Azure Rest webapi application
(2 answers)
Enabling CORS on Azure Active Directory
(1 answer)
OAuth2 Access origin error
(2 answers)
“No 'Access-Control-Allow-Origin' header is present” for redirected request to https://login.microsoftonline.com/
(3 answers)
Closed 3 years ago.
Edit: Yes, I've tried all the possible solutions suggested in other threads here. None of them seem to work for me. So before marking this question as duplicate, please look into my explanation. Thanks.
Also, I'm using adal-node npm module for Azure AD Authentication.
I'm trying to resolve the CORS error thrown by my webapp hosted on Azure.
I've my frontend written in Angular 6 (runs on Apache Tomcat server) and have hosted it as an App Service on Azure and I've my backend written in Node.Js (runs o Node server) which is again hosted as another App Service in Azure. My Node.Js code calls some APIs from Netsuite and modifies the data as needed and sends back to Angular frontend.
So when the user first hits the dashboard URL of frontend (xxxx.azurewebsites.net/login), there's a minimal login button, on hitting which an API in my Node.Js backend will be called and here my authentication with the Azure Active Directory takes place. On successful login, the user has to be redirected to dashboard screen of frontend. But here, I'm being thrown this error:
Access to XMLHttpRequest at 'https://login.microsoftonline.com/...redirect_uri=https://xxxxx.azurewebsites.net/forecastSummary...' from 'https://yyyyy.azurewebsites.net/') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header present on the requested resource.
I've already added the headers in my Node.Js backend as shown below:
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Authorization, Content-Type, Accept');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
next();
});
Plus, I also separately tried enabling CORS setting available in the Azure App Service by using the wildcard '*'. Neither does that seem to be working.
P.S: I can't attach screenshots or pictures supporting the problem since my SO reputation is low.

Azure App Service (Node) CORS origins won't work no matter where I add them

The Azure CORS settings doesn't seem to work at all unless I specify * any and all requests will return
"has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status."
I've added my CORS http + https variants of both my production + dev environment frontend. I have also added them in the web.config.
<add name="Access-Control-Allow-Origin" value="https://LINK"/>
<add name="Access-Control-Allow-Origin" value="https://LINK/"/>
It is becoming extremely unpredictable and unreliable. The application is configured to allow all origins:
app.options('/', function(req, res) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', '*');
res.setHeader('Access-Control-Allow-Headers', '*');
res.end();
});
So it would send preflight data. Does azure CORS not send any preflight data? Am I better off just setting * everywhere and then managing things via the API myself? Will Azure not overwrite that configuration anyway? Am I stuck with no way of managing CORS?
Yes, definitely you can achieve it either by setting CORS headers from the Azure portal or by adding CORS headers from your App.
Here's how you can set it form azure portal.
Navigate to azure portal
Navigate to the app service you have created.
Click on CORS in the app.
Enter URL's in the empty Allowed Origins text box.
Click Save.

What does cors middleware do?

Was looking at some node js code which created some web API's
and came across this:
//CORS Middleware
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With,
contentType,Content-Type, Accept, Authorization");
next();
});
Have looked around on the internet and can't seem to understand what it does?
Can someone please explain the purpose of cors middleware
This link may help.
https://learn.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api
CORS allows you to configure the web API's security. It has to do with allowing other domains to make requests against your web API. For example, if you had your web API on one server and your web app on another you could configure CORS in your Web API to allow your web app to make calls to your web API.

Resources