时间戳

首页 > 解决方案 > Vue.js 上不允许 Axios Post 返回 405 方法

vue.js - Vue.js 上不允许 Axios Post 返回 405 方法

问题描述

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

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

用提琴手分析请求看起来非常不同。在 axios 请求中，缺少内容类型标头，并且方法是 OPTIONS 而不是 POST。

这是邮递员的请求：

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 模块中，我尝试在主配置和发布请求中强制设置“内容类型”，但没有结果。

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 很陌生，所以也许我遗漏了一些东西。

标签： vue.jsiis.net-coreaxiosasp.net-core-5.0

解决方案

要在 post 请求的正文中以 JSON 格式发送数据，只需在 axios 选项中添加一个参数“data”。Axios 会自动将 content-tpe 设置为适合您的值。

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

这应该有预期的结果:)

推荐阅读