404 returned in CORS request for some web api calls from angular service - angularjs

I have an angular application that retrieves data from an ASP.Net web api service.
The web api is hosted on a different domain.
The web api contains multiple URL's to query different types of data, for instance site2/api/Employees, site2/api/Managers, etc.
The web api has a global configuration, as it does normally, i.e. no special configurations are made for any specific controllers.
I have created different controllers in angularjs and for each controller there is a service(copy-pasted code, but I have checked and updated all the necessary references correctly).
When I access site2/api/Employees from my angular code in site1, data is returned from the web api service.
However, when I access /site2/api/Managers from my angular code I get an error OPTIONS:/site2/api/Managers 404 not found
XMLHttpRequest cannot load /site2/api/Managers invalid status code 404
Could someone please,provide a solution for this issue

is i am not angularjs user but i can help you in cors
The cors request works when browsers allow cross-domain request.
One way is to Allow Cors request is through client browser
(jquery) jQuery.support.cors = true this line would be help full if
you are aiming IE Only
For Enabling in other Browser you may check this javscript
Another way is to set HTTP responses header to all access to Cors from server side
below is my php code to all access to Cors through HTTP responses header
<?php
header('Access-Control-Allow-Origin: http://yourdomain.com');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE');
header('Access-Control-Allow-Headers', 'Content-Type');
i hope this may help you..

Related

Allowing CORS only for my domain?

I have an AngularJs website and when I am trying to post data then when I am opening my website without using www then I am getting
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource
Otherwise, I am not getting any error.
I tried to search and found that I should implement CORS on my backend which is in NodeJs but can anyone please tell me how can I only implement CORS Headers such that for both www and without, it would work but for any other domain trying to access my API must result in preflight error.
I am trying to do this because I read here which-security-risks-do-cors-imply that allowing all domains can increase security overhead for my website which I do not want.
Thanks.
I'm afraid this is not something you can tweak just in your client-side code. In order for cross-origin requests to work, you need to set an http response header: it's the server, who serves the resource, who will need the change, not the client side code from angularJs.
I believe that you should update your question stating what your server side language is and how are you handling http requests in the server side. As far as I know, just adding a header like:
Access-Control-Allow-Origin: http://client.domain.com
In your responses will do the trick. Where client.domain.com is the domain of your client, angularJs application.

OPTIONS Error using twitter API (400)

For my personal website, I'd like to create a page summarizing my social presence.
I used Postman to make sure all my queries are valid.
So I made simple call to get my last post on twitter.
Everything works find on Postman, so there isn't any Authorization issues.
But when it comes to implement it on my client (using AngularJs ), I'm getting this error:
OPTIONS https://api.twitter.com/1.1/statuses/user_timeline.json?user_id=1106474965 400 ()
XMLHttpRequest cannot load https://api.twitter.com/1.1/statuses/user_timeline.json?user_id=1106474965. Response for preflight has invalid HTTP status code 400
I know it may be related to How does Access-Control-Allow-Origin header work? but I can't configure the server as I subscribed a shared hosting
(One.com).
I tried to reset my $httpProvider default values in vein.
It seems Twitter API doesn't support CORS headers, and that's why your preflight tests are failing:
https://twittercommunity.com/t/will-twitter-api-support-cors-headers-soon/28276

Request and Response between two projects

I'm trying to work on 2 projects. The first one is mainly for client side (AngularJS+MVC) development and second is server side, including web APIs. I want to use web APIs as controllers.
I set the server side project as start-up project. Then set its URL (localhost:..../) as the URL of the controller, then ran the project. After that with the view in the browser, I ran my view, too. (From the client project). The request correctly gets to the API controller from the second project, but I didn't reserve any Response. I guess the problem is the difference between URLs.
What is your opinion? And what should I do, then?
What kind of response are you getting? 200 (OK) status or something else? you might be getting cross orgin request error, if you have not enabled CORS on the web api and you are making the api request from the client side of the Angular project.
Please don't mind my poor English.
Are two projects served on the same domain? If not, there maybe a cross origin request error. You can fix it by adding some headers, like this:
header('Access-Control-Allow-Origin','*');
header('Access-Control-Allow-Methods', 'GET,POST,DELETE,PUT,PATCH');
header('Access-Control-Allow-Headers','Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');

Is there a way to avoid Preflighting with $http?

I'm using nginx on the remote server, and with no support for the OPTIONS method I've been terribly stuck. Both the server and angular refuse to talk to each other.
I just want to make a simple $http.post() request. Is there a way to configure the service to ONLY send the POST request, and not do any preflighting with OPTIONS?
This is not something AngularJS does, but something your browser does according to the Cross-Origin Resource Sharing standard. See also this answer on a related issue.
However, if you make it so that the AngularJS application is served from the same domain as your resource (different subdomains will affect cross-origin), then the browser will not send the OPTIONS request as the resource is no longer from a cross-origin server.
Example:
www.example.com requests resource on api.example.com will trigger OPTIONS request
www.example.com requests resource from www.example.com/api will not trigger OPTIONS request
If CORS is Unavoidable
You could change the header of the request to text/plain and then parse your response manually acording to answers in this link below
How to skip the OPTIONS preflight request in AngularJS

Cross Domain issue in Backbone.js

I have a web application that runs with backbone.js
I am using backbone models and separate REST API for database interactions.
Everything works well in my server. However i have to deploy it in clients AWS server and in that the webservice is in one EC2 instance and the backbone web files are in another instance. This is causing a cross domain error which i cannot resolve.
In jquery ajax i have used crossDomain:true and datatype:jsonp to resolve this issue.
But is there any method like this to resolve this issue in backbone.js? I understand backbone methods (save,fetch,delete) are all jquery-ajax calls but i cannot find a way to get over this issue in backbone.js
Error in console :
OPTIONS domain1.com/webservice_dev/profile/Login
Request header field Content-Type is not allowed by Access-Control-Allow-Headers.
jquery.js:9597 XMLHttpRequest cannot load domain2.com/webservice_dev/profile/Login.
Request header field Content-Type is not allowed by Access-Control-Allow-Headers.
Any guidance would be of great help.
Your server needs to acknowledge the Content-Type header in it's response to the preflight (OPTIONS) request. This is due the fact that the underlying request is of a Content-Type other than text/plain, multipart/form-data, or application/x-www-form-urlencoded.

Resources