Axios post request failing due to CORS but the same request using ajax is getting no issues

Question

I am getting following error wile doing axios post request. But when I use ajax request there is no issue:

request has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Ajax Request:

Axios request:

let payload = {
    type: ["a", "b"],
    category: ["a", "b"],
    category: ["a", "b"],
    accountNumber: "123"

};
var apiURL = this.$apiBaseURL + "/Product/ProductDetails";
$.ajax({
    url: apiURL,
    type: "POST",
    data: { payload },
    xhrFields: {
        withCredentials: true
    },
    success: function (result) {
        console.log(JSON.stringify(result));
    }
});

this.$http.post(apiURL,payload,{withCredentials: true})

**UPDATE 1 **

I am still facing the same issue. Here I will share the request header in both ajax and axios request

AJAX Working code and request header :

{
 var apiURL = this.$apiBaseURL + "/Request/MediaUpload";
$.ajax({
method: 'post',
processData: false,
contentType: false,
cache: false,
data: fileformData,
enctype: 'multipart/form-data',
url: apiURL,
      xhrFields: {
        withCredentials: true
      }
    });
}

Request header:

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 7610
Content-Type: multipart/form-data; boundary=---- 
WebKitFormBoundaryAjc8HwVPaRtQ5Iby
Host: localhost:62148
Origin: http://localhost:8989
Referer: http://localhost:8989/
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36

AXIOS failing code and header

var apiURL = this.$apiBaseURL + "/Request/MediaUpload";
var self=this; 
let config={
  headers:{
   'Content-Type': 'multipart/form-data'
  }
}
this.$http.post(apiURL, { withCredentials: true },fileformData,
         config)

Request Headers:

        Provisional headers are shown
        Accept: application/json, text/plain, */*
        Content-Type: application/json;charset=UTF-8
        Referer: http://localhost:8989/
        User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36

Here is my web api config where I have enabled cors

string origin = "http://localhost:8989";

        EnableCorsAttribute cors = new EnableCorsAttribute(origin, "*", "*", "*");
        cors.SupportsCredentials = true;
        config.EnableCors(cors);
        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

**UPDATE 2 **

The CORS configuration at server side is done correctly thats why I am able to make the call successfully via AJAX. Is this a known AXIOS issue which occurs only when we enable the windows authentication?

like @Estradiaz said, you should try opening the devtools on the network panel and look at both of your requests, especially the requests header and look for the differences — niccord, Feb 06 '20 at 08:45
CORS configuration should be configure at destination server! — Sherzod, Feb 06 '20 at 09:01
While doing axios request the data is passed via Request Payload and in the Ajax request I can see the data inside Form Data — Aathira, Feb 06 '20 at 09:07
In my case the error was on server side and I was using node js. I fixed it by adding cors package. app.use(cors()) just try to send request without content-type. — Qubaish Bhatti, Mar 18 '20 at 06:27
But here server side seems to be alright because I am getting the same post request success by using AJAX — Aathira, Mar 18 '20 at 07:23
Did you add the cors headers in your config? https://stackoverflow.com/questions/20079813/how-to-make-cors-authentication-in-webapi-2 — Jannes Botis, Mar 18 '20 at 11:14

score 0 · Answer 1 · answered Feb 06 '20 at 09:29

0

This issue arises because jQuery sends the request as application/x-www-form-urlencoded by default and does not send preflight request whereas axios sends as application/json and sends a preflight request i.e. OPTIONS before sending actual request.

One way it could work is by setting Content-type header to 'Content-Type': 'application/x-www-form-urlencoded' in axios.

You will have to change the settings on server side to get around this issue.

answered Feb 06 '20 at 09:29

Vijay Joshi

919
7
17

Server side configuration is correct that's why I am able to get my ajax POST method call success – Aathira Mar 18 '20 at 06:08

score 0 · Answer 2 · answered Mar 24 '20 at 13:42

0

Add this in your web.config file:

<system.webServer>
  <handlers>
    <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
    <remove name="OPTIONSVerbHandler" />
    <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
  </handlers>
</system.webServer>

Using default ajax won't send any OPTIONS request, but using axios does. This will enable accepting OPTIONS requests.

answered Mar 24 '20 at 13:42

Jafar Akhondali

1,552
1
11
25

Its already there in my web config with no use – Aathira Mar 26 '20 at 06:01
@Aathira Not sure if that matters, but path and verb are differnent for you – Jafar Akhondali Mar 26 '20 at 07:07

Axios post request failing due to CORS but the same request using ajax is getting no issues

2 Answers2