Axios Post return 405 Method Not Allowed on Vue.js-CodePudding

I'm trying to made a POST request on a NET CORE 5 service (hosted on IIS 10) from a Vue.js app with axios.

When I test the service with POSTMAN it's working perfectly but with Axios I'm always getting a 405 from the server.

Analyzing the requests with fiddler are looking very different. IN the axios request the content-type header is missing and the method is OPTIONS instead of POST.

This is the POSTMAN request:

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"
}

And this is the axios request:

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

In my Vue.js module I've tried to force the settings of the 'content-type' in the main config and in the post request with no results.

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;

I'm very new to Vue.js so maybe I'm missing something.

CodePudding user response：

The problem is that axios made a CORS request before the POST, and the NET Core API should be configured to accept CORS request.

I've found an article (here) that saying the problem for this cases is that IIS does not accept CORS request and the CORS module should be installed . I've tried this change but the result was the I was receving an HTTP/1.1 204 No Content instead of a 403.

In my case the problem was the API service itself.

The CORS should be enabled in the API Service. In NET CORE 5 for a basic configuration it's enough to add the CORS services in Startup

services.AddCors();

and configure it

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

With these changes the service works perfectly for any vue.js requests coming from axios.

CodePudding user response：

To send the data as JSON in the body of the post request, just add a parameter "data" to the axios options. Axios will automatically set the content-tpe to the proper value for you.

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

This should have the expected outcome :)