Getting JSON data from an API

Question

User-978317346 posted

Hi,

I'm new to web development and I'm trying to take an application I've developed for the desktop using .NET and create similar functionality in a web environment.  What I am currently stuck on is getting past an "Error 405" when I run the following bit of code to retrieve JSON from a web API:

fetch('https://<web site here>/api/v1/contract/getresponse?request.number=D2000-024',
                        {
                            headers: new Headers(
                                {
                                    'apikey': '<api-key here>'                                    
                                })
                        })
                        .then(response => response.json())
                        .then(data =>
                        {
                            console.log(data)
                        })
                        .catch(error => console.error(error))

If I comment out the headers section, I get what I expect (and error 401), but I am not sure why adding the header is causing the 405 error.  In my desktop app I have no problem using the apikey on the same url.

If there is a better way to do this, please let me know.

Thanks!

Answer 1

User-893317190 posted

Hi khabibulla,

405 means method not allowed , this usually happens  when you try to  make a cross-origin request. 

Maybe the website where you send request is different from the website  you send request to.

For example , your website is www.client.com  and the website you want to send request to is  www.server.com.

And the protocol  also matters , if your website is http and the website you want to send request is https.

Port also matters.

For more information , you could refer to mdn  https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

To solve your problem , if you have control over your server side , you could try to add the following code in your web.config.

<system.webServer>

  <httpProtocol>  
  <customHeaders>  
    <add name="Access-Control-Allow-Origin" value="*" />  
  <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS" />
    <add name="Access-Control-Allow-Headers" value="*"/>
        </customHeaders>  
</httpProtocol>

And in your global 

 protected void Application_EndRequest(object sender, EventArgs e)
    {
                 if(HttpContext.Current.Request.HttpMethod == "OPTIONS")
        {
            HttpContext.Current.Response.StatusCode = 200;
        }

    }

Best regards,

Ackerly Xu

 

Answer 2

User-978317346 posted

Hi Ackerly,

Thanks for responding.  I'm still trying to figure this out.  I do not have control on the server side.  I have no problems using the same URL within a Windows Forms application, retrieving the JSON data with the same URL and apikey.  I'm only running into problems with the javascript.

My .NET code that is working looks like this:

        private void btnGo_Click(object sender, EventArgs e)
        {
            try
            {
                this.Cursor = Cursors.WaitCursor;
                WebClient client = new WebClient();
                client.Headers["apikey"] = "<apikey here>";

                string url = "https://<url here>/api/v1/contract/getresponse?request.number=" + txtContract.Text;

                Stream stream = client.OpenRead(url);
                StreamReader reader = new StreamReader(stream);
                JObject jObject = JObject.Parse(reader.ReadLine());

                txtContractDescription.Text = jObject["results"][0]["description"].ToString();
            }

            catch (Exception ex)
            {
                MessageBox.Show(ex.ToString());
            }
            finally
            {
                this.Cursor = Cursors.Default;
            }

        }

Is there a better way to what I want to do in javascript that using the "fetch" statement?? 

Answer 3

User475983607 posted

I recommend that you write server side code to do the API call as the api-key is openly exposed to everyone that uses the application.   Another benefit is you can reuse known working code plus you are not doing a cross site request.

Answer 4

User-893317190 posted

Hi khabibulla,

From your code , you use WebClient  in your win form app, which is different from javascript fetch aip.

Fetch api or ajax in javascript at client side has source-control but webclient doesn't have.

If you want the same effect with your winform app, you should also call webclient at  your c# server side.

Please create a asmx or webapi  and in the asmx or webapi call your api with webclient and then returns the data to your client side.

Best regards,

Ackerly Xu