asp.net - Origin http://localhost is not allowed by Access-Control-Allow-Origin

Question

I'm trying to call a webservice from my local machine. But the I get the following errors in Chrome console:
http://www.test.com/service.svc/api/?cid=1 405 (Method Not Allowed) XMLHttpRequest cannot load http://www.test.com/service.svc/api/?cid=1.
Origin http://localhost is not allowed by Access-Control-Allow-Origin.

My local test URL is: http://localhost/welcome/html/index.html

When I upload my code to the actual domain and call the webservice from there, it does work ofcourse.

I've already tried to change the access control headers, but that doesnt help.

Namespace RestService

Public Class service
    Implements Iservice

    Public Function GetProvinces(ByVal cid As String) As AjaxControlToolkit.CascadingDropDownNameValue() Implements Iweddingservice.GetProvinces
        WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Methods", "DELETE, POST, GET, OPTIONS")
        WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Origin", "*")

        Dim MyConnection As SqlConnection = GetConnection()
        Dim cmd As New SqlCommand("SELECT provinceid,title FROM provinces WHERE CountryID=@CountryID ORDER BY title ASC", MyConnection)
        cmd.Parameters.Add(New SqlParameter("@CountryID", cid))
        Dim values As New List(Of CascadingDropDownNameValue)
        Try
            MyConnection.Open()
            Dim reader As SqlDataReader = cmd.ExecuteReader
            While reader.Read
                values.Add(New CascadingDropDownNameValue(reader("title").ToString, reader("provinceid").ToString))
            End While
        Catch ex As Exception

        Finally
            MyConnection.Close()
        End Try
        Return values.ToArray
    End Function

End Class


End Namespace       

Answer 1

The request to the service is failing because of browser same origin policy. Your local server is at http://localhost while you are trying to access a resource at http://www.test.com/. These are both at different domains. So it won't work.

The solution to this problem is to use the Access-Control-Allow-Origin and Access-Control-Allow-Methods, part of the CORS spec. You've included these in the response headers but that won't do any good because the browser will be making a pre-flight request with OPTIONS verb to verify if the call is allowed. Since your service is not able to handle the OPTIONS verb you are seeing a 405 (Method Not Allowed) error.

So, if you'd want your service to be accessible from a different domain then you'll have to modify your WCF service to support CORS. I would recommend this link: http://blogs.microsoft.co.il/blogs/idof/archive/2011/07/02/cross-origin-resource-sharing-cors-and-wcf.aspx. By using this you can make your service support CORS with no change in your existing code.