AngularJS CORS issues data won't load

Question

I am getting the following error message on my angular/asp.net web api project. XMLHttpRequest cannot load http://localhost:7291/api/products. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:7305' is therefore not allowed access. The response had HTTP status code 500.

I know it has something to do with CORS not being implemented correctly, but I'm not sure what I'm doing wrong. I'm following a tutorial and as far as I can tell I've got everything right?

Here's the info from the network tab in chrome debug. Remote Address:[::1]:7291 Request URL:http://localhost:7291/api/products Request Method:GET Status Code:500 Internal Server Error Response Headers (8) Request Headers view source Accept:application/json, text/plain, / Accept-Encoding:gzip, deflate, sdch Accept-Language:en-US,en;q=0.8 Connection:keep-alive Host:localhost:7291 Origin:http://localhost:7305 Referer:http://localhost:7305/ User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36

Here is where I map the API url.

(function () {
"use strict";
angular
.module("common.services", ["ngResource"])

.constant("appSettings",
{
    serverPath: "http://localhost:7291/"
})
}());

And this is how I'm setting up the EnableCOrsAttribute:

 [EnableCorsAttribute("http://localhost:7305", "*", "*")]

Can anyone see what I'm doing wrong? If more code is needed please let me know. Thanks.

Chris Schaller · Accepted Answer · 2016-08-04 07:20:14Z

First Step, use a tool like Postman or Fiddler to verify your service endpoint first to ensure functionality.

It looks as if this is not a CORS issue at all, due to the 500 response:

Status Code:500 Internal Server Error

A CORS issue on a normal success response is usually manifested as a status 0 or -1 in the client, but what you are experiencing is an error on the server side. I have seen this in my own code and suspect that your implementation on the server side is only injecting the CORS headers at the end of processing the request and as the processing abnormally aborted the CORS headers didn't make it in there.

Once you have confirmed functionality do an OPTIONS request on your endpoint to verify CORS:

OPTIONS / HTTP/1.1
Host: localhost:7291
Cache-Control: no-cache
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

Then inspect the headers of the response, if your CORS is enabled correctly on the server you should see Access-Control-Allow headers similar to this:

Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS, ETAG
Access-Control-Allow-Origin: http://localhost:7305

Collectives™ on Stack Overflow

AngularJS CORS issues data won't load

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related