ReactJS 使用 POST 和 GET 发出跨域请求失败，代码为 405 [英] ReactJS making a cross domain request using POST and GET fails with code 405

问题描述

我正在尝试向 Skyscanner 发出 cro 请求并获取一些信息.我研究了他们的 doc，这是我需要做的:

I am trying to make a cros request to skyscanner and get some information. I have studied their doc and here is what I need to do:

1. 使用 POST 请求进行会话，
2. 然后获取响应头，
3. 然后使用该网址发出 GET 请求，
4. 获取航班数据.

所以基本上有 2 个 API 调用.

So basically there are 2 API calls.

这是我的代码:

export function getFlights() {

    const request = axios.post(
        'http://partners.api.skyscanner.net/apiservices/pricing/v1.0/',  
        JSON.stringify({
            "cabinclass": "Economy",
            "country": "UK",
            "currency": "GBP",
            .
            .
            .
            .
            "apikey": "apikey"
        }), 
        {   
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        })
        .then(function (response) {
            console.log(response.headers);
            axios.get(response.headers.location + '?apiKey=apikey&stops=0&duration=360&includeCarriers=ba;u2;af').then(function(response) {
                console.log(response)
            })
        })
        .catch(function (error) {
            console.log(error);
        });
    return {
        type: GET_FLIGHT, 
        payload: request
    };
}

所以我删除了一些查询参数并隐藏了api键.

So I removed some of the query parameters and also hide the api key.

我已经下载了 Chrome 的 allow-control-allow-origin 扩展，并且我还更改了主机文件:C:\Windows\System32\drivers\etc\hosts，所以现在我通过测试域访问我的应用程序:http://testdomain.com:3000/

I have downloaded allow-control-allow-origin extension for chrome, and I have also changed the host file in: C:\Windows\System32\drivers\etc\hosts, so now I am accessing my application through a test domain: http://testdomain.com:3000/

但是当我尝试获取结果时，出现以下错误:

But when I try to get the result, I get the following error:

POST http://partners.api.skyscanner.net/apiservices/定价/v1.0/ 405(方法不允许)

POST http://partners.api.skyscanner.net/apiservices/pricing/v1.0/ 405 (Method Not Allowed)

当我转到 NETWORK TAB 并选择 XHR 时，我看到 v1.0/partners.api.skyscanner.net/apiservices/pricing 是红色的，在 headers 下我可以看到:

When I go to NETWORK TAB and I select XHR, I see v1.0/ partners.api.skyscanner.net/apiservices/pricing which is red and under the headers I can see:

一般响应头请求头表单数据，其中有(似乎)带有我的参数的航班??

General Response Headers Request Headers Form Data, which has (seems like) a flight with my parameters??

我不确定我做错了什么，但从文档和其他所有内容看来，我应该得到代码 200，这是为了成功，但我一直得到 405.有人可以向我解释我做错了什么吗?

I am not sure what I have done wrong but from the documentation and everything else seems like I should be getting code 200 which is for success but I keep getting 405. Can someone explain to me what I'm doing wrong?

推荐答案

在加载 querystring 库后试试这个:

Try this, after loading the querystring library:

var querystring = require('querystring');

var data = {
    cabinclass: 'Economy',
    country: 'UK',
    currency: 'GBP',
    // ...
    apikey: 'apikey' // be sure your API key is correct
};

var authOptions = {
    method: 'POST',
    url: 'http://partners.api.skyscanner.net/apiservices/pricing/v1.0',
    data: querystring.stringify(data),
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    json: true
};

axios(authOptions)
    .then(function(response){
        console.log(response.data);
        console.log(response.status);

        axios.get(response.headers.location + '?apiKey=apikey&stops=0&duration=360&includeCarriers=ba;u2;af').then(function(response) {
            console.log(response);
        });
    })
    .catch(function(error){
      console.log(error);
    });

根据doc，尝试使用http://partners.api.skyscanner.net/apiservices/pricing/v1.0 而不是 http://partners.api.skyscanner.net/apiservices/pricing/v1.0/>(没有/).

According to the doc, try to use http://partners.api.skyscanner.net/apiservices/pricing/v1.0 instead of http://partners.api.skyscanner.net/apiservices/pricing/v1.0/ (without /).

这篇关于ReactJS 使用 POST 和 GET 发出跨域请求失败，代码为 405的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！