jQuery.ajax is not getting data from Web API running with a different port number

Question

I have developed a Web API in asp.net 5 where I am fetching a list of books available in the database and returning it as JSON. The API is running at Port number 5000 (http://localhost:5000/api/bookstore)

Now I have a website set up on my PC with a single index.html file where I am trying to consuming the above API endpoint. The website is running at a different port (52786).

Initially with dataType: 'json' I was getting the following console error:

XMLHttpRequest cannot load http://localhost:5000/api/bookstore. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:52786' is therefore not allowed access.

To avoid above 'Access-Control-Allow-Origin' error I used dataType: 'jsonp', (as suggested by Gavin here). Using jsonp apparently removes the error from console but nothing is showing up when I am running the page. How would I know whether the endpoint is at all being hit and if it is why the data is not being pulled?

But when I am running http://localhost:5000/api/bookstore separately on the browser it is giving me data perfectly.

Below is the code snippet I used to invoke API endpoint using jQuery and ajax:

<script type="text/javascript">
  $(document).ready(function () {
    //jQuery.support.cors = true;
    $.ajax({
      type: "GET",
      url: "http://localhost:5000/api/bookstore",
      dataType: 'jsonp',
      success: function (data) {
        alert(data);
        $("#response").html(data);
      },
      error: function (err) {

      }
    });
  });
</script>

NB: Both the website and the Web API port are running.

UPDATE (Screenshots)

Image 1: Console messages when invoking the endpoint from another website (as could be seen I am running Chrome with disable-web-security in order to bypass CORS. I was successful in the past by doing this in dev environment so tried here as well.

Image 2: Network:

Image 3: API Source

You can't just change the datatype expected back in the request on the client to JSONP - you need to change how the server returns data for that to work. However, a much simpler idea is to enable CORS on your WebApi, see this question for instructions how to achieve that — Rory McCrossan
– Rory McCrossan, Commented Jan 5, 2016 at 11:03
Thank you for quick replies! I will read and try in my solution. — Subrata Sarkar
– Subrata Sarkar, Commented Jan 5, 2016 at 11:04
I am using VS code for my Web API development. In project.json file the version resolving is "Microsoft.AspNet.WebApi.Cors": "5.2.3",. dnu restore restores project.lock.json. But when building I am receiving D:\Projects\aspnet\apiservice\project.json(0,0): error NU1002: The dependency Microsoft.AspNet.WebApi.Core 5.2.3 in project apiservice does not support framework DNXCore,Version=v5.0. One other thing. This project was generated using Yeoman. I don't have any WebApiConfig.cs in the project. Even the assembly resolves I have no idea of where to put config.EnableCors(...); — Subrata Sarkar
– Subrata Sarkar, Commented Jan 5, 2016 at 12:20
@NiladriSarkar any luck? I'm also having the same issue. It looks like .net core didn't get Cors support so far. — eestein
– eestein, Commented Apr 12, 2016 at 20:33

Rajat · Accepted Answer · 2016-01-05 12:31:19Z

0

The API should have the following for allowing cross origin request.

<httpProtocol>
      <customHeaders>
        <clear />
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="content-type" />
      </customHeaders>
</httpProtocol>

Also, make sure that the Handler Mappings are present

<handlers>
            <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
            <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,POST,PUT" type="System.Web.Handlers.TransferRequestHandler" resourceType="Unspecified" requireAccess="Script" preCondition="integratedMode,runtimeVersionv4.0" responseBufferLimit="0" />
        </handlers>

answered Jan 5, 2016 at 12:31

Rajat

4324 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Subrata Sarkar Over a year ago

You mean in web.config?

Subrata Sarkar Over a year ago

I added above two sections in web.config but for me there is no difference

Rajat Over a year ago

Please upload a screenshot of your network Request and the Headers

Subrata Sarkar Over a year ago

Thanks Rajat for taking time on my issue. I have EDITED original question and uploaded some screenshots. Hope they would be helpful.

Subrata Sarkar · Accepted Answer · 2016-04-13 04:25:02Z

I got it to work in the following way.

Step 1: In Startup.cs inside ConfigureServices method we need to add CORS like this:

public void ConfigureServices(IServiceCollection services)
{
  //CORS
  services.AddCors(options => options.AddPolicy("AllowAll", p => p.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()));
}

Then we need to add the attribute EnableCors to methods we need to access externally from a different website, which exposes these methods to bypass Access-Control-Allow-Origin error. With CORS enables we need not to run a browser with disabled security mode!

[EnableCors("AllowAll")] //This allows the method to be called from anywhere.
public async Task<object> Recipients([FromBody] dynamic jsonText)
{
  var result = await getYourResultFromSomewhere();
  return result;
}

Let me know if this is of any help!

Collectives™ on Stack Overflow

jQuery.ajax is not getting data from Web API running with a different port number

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related