使用 azure web 应用程序部署的 express angular 5 应用程序上不允许使用 405 方法

Question

我使用 azure web 应用程序部署了我的 angular + nodejs 应用程序，但是在尝试访问我的节点 api 时出现 405 method not allowed 错误

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，所以我在 dist 文件夹的根目录中添加了一个 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\""
  },

我的 Angular 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:\home\site\wwwroot)。

根据您的web.config，您的文件夹结构应如下所示：

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

实际上，您的 server.js 文件中不再需要这些行：

// 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/{routeName}

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

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