Origin http: // localhost: 1716 not allowed Access-Control-Allow-Origin

Question

I have this error

XMLHttpRequest cannot load http://localhost:81/Test/Service.svc/SetJSON . The origin of http://localhost:1716 not allowed using Access-Control-Allow-Origin.

when I call the wcf web service using jquery.

 $.ajax({ type: 'POST', url: webmethod, data: '{"data":"Darshana"}', contentType: "application/json; charset=utf-8", dataType: "json", success: function (msg) { alert(msg.d); }, error: function (e) { alert("Unavailable"); } }); 

why?

any help. thanks..

Answer 1

I don’t remember how I got this error and when. But, since many people had this problem, I decided to publish what I did.

WCF - IService

 [OperationContract] [WebGet(BodyStyle = WebMessageBodyStyle.Bare, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "SetJSON?data={data}")] string SetJSON(string data); 

WCF - Service

 [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] public class Service : IService { public string SetJSON(string data) { return data; } } 

WCF - web.config

 <system.serviceModel> <bindings> <webHttpBinding> <binding name="webHttpBindingWithJsonP" crossDomainScriptAccessEnabled="true" /> </webHttpBinding> </bindings> .... <services> <service name="RnDService.Service"> <endpoint address="" behaviorConfiguration="webHttpBehavior" binding="webHttpBinding" bindingConfiguration="webHttpBindingWithJsonP" contract="RnDService.IService" /> </service> </services> 

Jquery call

 $.ajax({ type: "GET", url: "http://localhost:81/Test/Service.svc/SetJSON?data=" + "{ \"dl\":" + datalist + " }", contentType: "application/json; charset=utf-8", dataType: "jsonp", success: function (data) { alert(data.toString()); }, error: function (XMLHttpRequest, textStatus, errorThrown) { debugger; alert("Error Occured!"); } }); 

not 100% sure that solved my problem. Anyway, this will help someone. :)

Answer 2

Essentially, since you are accessing a different port, this is not the same origin .

You will need to enable Cross Origin resource sharing in a service that runs on port 1716.

Not knowing what you are trying to do, a configuration like this :

 <?xml version="1.0" encoding="utf-8"?> <configuration> <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> </customHeaders> </httpProtocol> </system.webServer> </configuration> 

It should allow you to test, although for production it is desirable to assign white fields to the corresponding domains, and not use a wildcard.

Answer 3

Different port, attempt to configure dataType: 'jsonp'

Answer 4

I solved this with the mod_proxy Apache module. Enable Modules:

 LoadModule proxy_module modules/mod_proxy.so LoadModule proxy_http_module modules/mod_proxy_http.so 

Then add:

 ProxyPass /your-get-url/ http://localhost:1716/ 

Finally, pass the proxy url to your script.

Answer 5

If you use localhost: port in Angular.js, make sure you avoid your port number as follows:

 var Project = $resource( 'http://localhost\\:5648/api/...', {'a':'b'}, { update: { method: 'PUT' } } ); 

See https://github.com/angular/angular.js/issues/1243 for more details.

Answer 6

I wrote a message (access to JSON data from a local data source is not allowed) , which is essentially a zenio solution, but with step-by-step instructions. You have configured the reverse proxy server in Apache so that it redirects the local URL to the port where the JSON data is located (basically, forwarding it to the "remote" data source).