405在使用Azure Web应用程序部署的Express Angular 5应用程序上不允许使用方法

Question

我使用Azure Web应用程序部署了我的Angular Nodejs应用程序，但我在尝试访问我的节点API

时就不会允许405方法错误

server.js静态资产代码

/*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"));
});

由于我正在使用IIS，因此在此GIST

中添加了一个web.config

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>

我使用构建脚本构建项目

 "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""
  },

我的角度cli json看起来像这样

"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"...}]

最后，我的索引基础HREF是<base href="/">

Answer 1

您需要确保将web.config文件放在应用程序的根(D:homesitewwwroot(。

。

基于您的web.config，您的文件夹结构应该看起来像这样：

D:homesitewwwroot
├── node_modules 
│   └── ...
├── public
│   └── ...
├── server.js
├── package.json
└── web.config

实际上，您不再需要服务器中的这些行：

// 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"));
});

现在，您可以使用此端点访问快速路线：

https：//{yourwebappname} .azurewebsites.net/api/{utarename}

并使用此端点检索静态文件：

https：//{yourwebappname} .azurewebsites.net/{thefileinpublic}