Axios Post return 405 方法不允许 Vue.js

Question

我正在尝试从带有 axios 的 Vue.js 应用程序对 NET CORE 5 服务（托管在 IIS 10 上）发出 POST 请求。

当我使用 POSTMAN 测试服务时，它运行良好，但使用 Axios 我总是从服务器收到 405。

使用 fiddler 分析请求看起来非常不同。在 axios 请求中缺少 content-type header 并且方法是 OPTIONS 而不是 POST.

这是 POSTMAN 请求：

POST https://localhost/apiluxor/api/SignIn HTTP/1.1
Content-Type: application/json
User-Agent: PostmanRuntime/7.28.4
Accept: */*
Postman-Token: acfed43c-731b-437b-a88a-e640e8216032
Host: localhost
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Content-Length: 55

{
    "username":"user",
    "password":"testpw"
}

这是 axios 请求：

OPTIONS https://localhost/apiluxor/api/SignIn HTTP/1.1
Host: localhost
Connection: keep-alive
Accept: */*
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Origin: http://172.16.1.110:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
Sec-Fetch-Dest: empty
Referer: http://172.16.1.110:8080/
Accept-Encoding: gzip, deflate, br
Accept-Language: it-IT,it;q=0.9,en-US;q=0.8,en;q=0.7

在我的 Vue.js 模块中，我试图在主配置和 post 请求中强制设置 'content-type'，但没有结果。

import { App } from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
import JwtService from "@/core/services/JwtService";
import { AxiosResponse, AxiosRequestConfig } from "axios";

class ApiService {
  public static vueInstance: App;
  public static init(app: App<Element>) {
    ApiService.vueInstance = app;
    ApiService.vueInstance.use(VueAxios, axios);
    ApiService.vueInstance.axios.defaults.baseURL =
      "https://localhost/apiluxor/api";
    ApiService.vueInstance.axios.defaults.headers.post["Content-Type"] =
      "application/json";
  }

  public static setHeader(): void {
    ApiService.vueInstance.axios.defaults.headers.common[
      "Authorization"
    ] = `Bearer ${JwtService.getToken()}`;
  }

  public static post(
    resource: string,
    params: AxiosRequestConfig
  ): Promise<AxiosResponse> {
    return ApiService.vueInstance.axios.post(resource, params, {
      headers: { "content-type": "application/json" },
    });
  }

export default ApiService;

我是 Vue.js 的新手，所以我可能遗漏了什么。

Answer 1

问题是 axios 在 POST 之前发出了 CORS 请求，NET Core API 应该配置为接受 CORS 请求。

我找到了一篇文章（here) that saying the problem for this cases is that IIS does not accept CORS request and the CORS module 应该安装。我已经尝试过此更改，但结果是我收到了 HTTP/1.1 204 No Content 而不是 403.

在我的例子中，问题是 API 服务本身。

应该在 API 服务中启用 CORS。在 NET CORE 5 中，对于基本配置，在 Startup

中添加 CORS 服务就足够了

services.AddCors();

并配置它

    app.UseCors(builder =>
    {
        builder
        .AllowAnyOrigin()
        .AllowAnyMethod()
        .AllowAnyHeader();
    });

通过这些更改，服务可以完美地处理来自 axios 的任何 vue.js 请求。

Answer 2

要在 post 请求的主体中将数据作为 JSON 发送，只需将参数“data”添加到 axios 选项。 Axios 会自动将 content-tpe 设置为适合您的值。

// Simple example
axios.post(myUrl, {
  data: {
    "username":"user",
    "password":"testpw"
  }
});

这应该有预期的结果:)

Axios Post return 405 方法不允许 Vue.js

Axios Post return 405 Method Not Allowed on Vue.js

iis

vue.js

.net-core

axios

asp.net-core-5.0