Axios Post返回405方法不允许在Vue.js

Question

我正在尝试从Vue.js应用程序与axios对。NET CORE 5服务(托管在IIS 10上)进行POST请求。

当我使用POSTMAN测试服务时，它工作得很好，但使用Axios时，我总是从服务器获得405。

用fiddler分析请求看起来非常不同。在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模块中，我试图在主配置和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请求。

我找到了一篇文章(在这里)，说这种情况下的问题是IIS不接受CORS请求，应该安装CORS模块。我已经尝试了这个更改，但结果是我收到的是HTTP/1.1 204 No Content而不是403。

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

CORS应该在API服务中启用。在。CORE 5中，要进行基本配置，只需在Startup

中添加CORS服务即可。

services.AddCors();

并配置

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

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

Answer 2

要在post请求的主体中以JSON形式发送数据，只需添加一个参数"data"到axios选项。Axios会自动将内容类型设置为适合您的值。

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

这应该有预期的结果:)