0

I'll start by saying I'm a bit of a newb when it comes to Javascript/React. I am attempting to communicate with my WCF endpoint server but I can’t seem to send any POST messages without getting a response:

OPTIONS http://###/testbuyTicket 405 (Method Not Allowed)

It seems that because I am sending it with content-type JSON it requires a ‘pre-flight’ and this is where it is failing.

This is my client code:

    var headers = {
        'headers': {
            'Content-Type': 'application/json',
        }
    }

    axios.post(call, data, headers).then(res => {
        try {
            if (res) {}
            else {
                console.log(res);
            }
        }
        catch (err) {
            console.log(err);
        }
    }).catch(function (error) {
        console.log(error);
      });

Here is the error details:

enter image description here

I don’t see why this pre-flight is failing. On the server I have already allowed everything I believe I need:

{"Access-Control-Allow-Origin", "*"},
{"Access-Control-Request-Method", "POST,GET,PUT,DELETE,OPTIONS"},
{"Access-Control-Allow-Headers", "X-PINGOTHER,X-Requested-With,Accept,Content-Type"}

[ServiceContract]
public interface IPlatform
{
    [OperationContract]
    [WebInvoke(UriTemplate = "testbuyTicket")]
    TicketResponse TestBuyTicket(PurchaseRequest purchaseRequest);
}

Any help would be appreciated. I feel like I've tried everything. Thanks in adance.

SumGuy
  • 491
  • 5
  • 8
  • 22
  • What is the purpose of `'headers': { 'Content-Type': 'application/json'}` within `headers`? – guest271314 Jan 25 '18 at 18:05
  • Seems your server isn't processing OPTIONS request which is the CORS preflight and is telling you OPTIONS is not allowed – charlietfl Jan 25 '18 at 18:06
  • @guest271314 I added that to confirm that I am sending data in a JSON format, without that a response is sent complaining that the data is in RAW format. A few things I have added more in hope than anything – SumGuy Jan 25 '18 at 18:07
  • Why do you create a `headers` object, then include a nested `headers` object? – guest271314 Jan 25 '18 at 18:09
  • @charlietfl is there something further I need to add. I've told it to allow OPTIONS request and the Response header says it does allow them – SumGuy Jan 25 '18 at 18:09
  • See [Why does Fetch API Send the first PUT request as OPTIONS](https://stackoverflow.com/questions/42311018/why-does-fetch-api-send-the-first-put-request-as-options/) – guest271314 Jan 25 '18 at 18:10
  • 1
    But that is only in the CORS headers. Is probably a server side routing issue. Inspect that actual OPTIONS request, likely see no access control headers in it – charlietfl Jan 25 '18 at 18:11
  • @guest271314 desperation. I have removed the addtional bits to avoid confusion – SumGuy Jan 26 '18 at 11:57

2 Answers2

2

I have found a solution, I'm not sure if it's the most elegant solution but it does work.

Basically I have an endpoint that the call should be directed too, but it only accepts POST requests, so I have added an OPTIONS endpoint with an empty method and it all appears to work now.

So I now have:

[ServiceContract]
public interface IPlatform
{
    [OperationContract]
    [WebInvoke(UriTemplate = "testbuyTicket")]
    TicketResponse TestBuyTicket(PurchaseRequest purchaseRequest);

    [OperationContract]
    [WebInvoke(UriTemplate = "testbuyTicket", Method = "OPTIONS")]
    TicketResponse TestBuyTicketOptions(PurchaseRequest purchaseRequest);
}

Doing this allows the server to respond to the OPTIONS call and then the POST call.

Thanks everyone for your assistance.

Big shoutout to @demas for the idea, see post Response for preflight has invalid HTTP status code 405 for more info

SumGuy
  • 491
  • 5
  • 8
  • 22
0

Like @charlietfl says, this doesn't appear to be a CORS issue, since you seem to be returning the headers OK (per the screenshot).

My guess is that your web server (Apache or whatever) doesn't allow OPTIONS requests - many only allow GET/POST/HEAD by default.

Probably a simple web server setting...

roryhewitt
  • 4,097
  • 3
  • 27
  • 33