Блог

Я пытаюсь отправить запрос POST в службу NET CORE 5 (размещенную в IIS 10) из Vue.js приложение с axios.

Когда я тестирую сервис с POSTMAN, он работает отлично, но с Axios я всегда получаю 405 с сервера.

Анализ запросов с помощью fiddler выглядит совсем по-другому. В запросе axios заголовок типа содержимого отсутствует, а метод — 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 модуль Я пытался принудительно изменить настройки «content-type» в основной конфигурации и в 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 так что, может быть, я что-то упускаю.

Проблема в том, что axios отправил запрос CORS перед публикацией, и API NET Core должен быть настроен на прием запроса CORS.

Я нашел статью (здесь ), в которой говорится, что проблема в этом случае заключается в том, что IIS не принимает запрос CORS, и модуль CORS должен быть установлен. Я пробовал это изменение, но результатом было то, что я получал HTTP / 1.1 204 без содержимого вместо 403.

В моем случае проблема заключалась в самой службе API.

CORS должен быть включен в службе API. В NET CORE 5 для базовой конфигурации достаточно добавить службы CORS при запуске

 services.AddCors();
 

и настройте его

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

С этими изменениями сервис отлично работает для любого vue.js запросы, поступающие от axios.

Чтобы отправить данные в виде JSON в теле post-запроса, просто добавьте параметр «data» в параметры axios. Axios автоматически установит для content-tpe правильное значение для вас.

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

Это должно иметь ожидаемый результат 🙂