状态405的飞行前响应失败

时间:2018-01-25 18:01:11

标签: javascript reactjs wcf cors axios

我首先要说的是,当谈到Javascript / React时,我有点像新手。我正在尝试与我的WCF端点服务器进行通信,但我似乎无法在没有得到响应的情况下发送任何POST消息:

选项http://###/testbuyTicket 405(方法不允许)

似乎因为我发送的内容类型为JSON,所以它需要一个'pre-flight',这就是它失败的地方。

这是我的客户代码:

    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);
      });

以下是错误详情:

enter image description here

我不明白为什么这次飞行前失败了。在服务器上,我已经允许了我认为需要的所有内容:

{"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);
}

任何帮助将不胜感激。我觉得我已经尝试了一切。谢谢你。

2 个答案:

答案 0 :(得分:2)

我找到了一个解决方案,我不确定它是否是最优雅的解决方案,但确实有效。

基本上我有一个端点,调用也应该被定向,但是它只接受POST请求,所以我添加了一个带有空方法的OPTIONS端点,现在它们似乎全部工作了。

所以我现在有:

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

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

这样做可以让服务器响应OPTIONS调用,然后响应POST调用。

感谢大家的帮助。

对于@demas的想法有很大的帮助,请参阅帖子Response for preflight has invalid HTTP status code 405了解更多信息

答案 1 :(得分:0)

就像@charlietfl所说的那样,这似乎不是一个CORS问题,因为你似乎正在返回标题OK(按截图)。

我的猜测是你的网络服务器(Apache或其他)不允许OPTIONS请求 - 许多人默认只允许GET / POST / HEAD。

可能是简单的网络服务器设置......