405 Method not allowed on express angular 5 app deployed using azure web app

Question

I deployed my angular + nodejs app using azure web app but i get 405 method not allowed error while trying to access my node api

server.js static assets code

/*API routes*/
const api = require("./server/routes/route");

/*Enable cors origin*/
var corsOptions = {
  "origin": "*",
  "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
  "preflightContinue": false,
  "optionsSuccessStatus": 204
}
app.use(cors(corsOptions));

app.use(express.static(path.join(__dirname, "/dist")));

app.use("/api", api);

app.get("/", function(req, res) {
  res.sendfile(path.join(__dirname, "/dist/index.html"));
});

since i am using iis i have added a web.config in root of dist folder as this gist

https://gist.github.com/iammelvin/62e2582796cbc3fa8b5fc9e242915788

<?xml version="1.0" encoding="utf-8"?>

<configuration>
  <system.webServer>

    <webSocket enabled="false" />

    <handlers>
      <add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
    </handlers>

    <rewrite>
      <rules>
        <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
          <match url="^server.js\/debug[\/]?" />
        </rule>

        <rule name="StaticContent">
          <action type="Rewrite" url="public{REQUEST_URI}"/>
        </rule>

        <rule name="DynamicContent">
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
          </conditions>
          <action type="Rewrite" url="server.js"/>
        </rule>
      </rules>
    </rewrite>

    <security>
      <requestFiltering>
        <hiddenSegments>
          <remove segment="bin"/>
        </hiddenSegments>
      </requestFiltering>
    </security>

    <httpErrors existingResponse="PassThrough" />

  </system.webServer>
</configuration>

I build the project using build script

 "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "npm run clean && ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev": "concurrently  \"nodemon --inspect-brk=3000 server.js --watch server\" \"ng serve --proxy-config proxy.config.json\""
  },

my angular cli json looks something like this

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": ["assets", "favicon.ico"],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app"...}]

and finally my index base href is <base href="/">

Aaron Chen Aaron Chen · Accepted Answer · 2018-02-14T07:07:26

You need to make sure the web.config file is put in the root of your app (D:\home\site\wwwroot).

Based on your web.config, your folder structure should look something like this:

D:\home\site\wwwroot
├── node_modules 
│   └── ...
├── public
│   └── ...
├── server.js
├── package.json
└── web.config

Actually, you no longer need these lines in your server.js file:

// remove these lines of the code as well
app.use(express.static(path.join(__dirname, "/dist")));

app.get("/", function(req, res) {
  res.sendfile(path.join(__dirname, "/dist/index.html"));
});

Now, you can access your express route with this endpoint:

https://{yourWebAppName}.azurewebsites.net/api/{routeName}

And retrieve the static file with this endpoint:

https://{yourWebAppName}.azurewebsites.net/{theFileInPublic}

405 Method not allowed on express angular 5 app deployed using azure web app

1 Answers