我正在嘗試從帶有 axios 的 Vue.js 應用程式對 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 請求中強制設定“內容型別”，但沒有結果。
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 很陌生，所以也許我錯過了一些東西。
uj5u.com熱心網友回復：
問題是axios在POST之前做了一個CORS請求，NET Core API應該配置為接受CORS請求。
我發現一篇文章（這里）說這種情況下的問題是 IIS 不接受 CORS 請求并且應該安裝CORS 模塊。我已經嘗試過這種更改，但結果是我收到的是 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 請求。
uj5u.com熱心網友回復：
要將資料作為 JSON 發送到 post 請求的正文中，只需在 axios 選項中添加一個引數“data”。Axios 會自動將 content-tpe 設定為適合您的值。
// Simple example
axios.post(myUrl, {
data: {
"username":"user",
"password":"testpw"
}
});
這應該有預期的結果:)
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/338426.html
標籤：Vue.js 信息系统 .net核心 公理 asp.net-core-5.0