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.
Related
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.
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
I'm using angularJS for POST from localhost to some API. but I got this error message:
XMLHttpRequest cannot load "...API link..." Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.
I can post to the API when I use "Allow-Control-Allow-Origin" chrome extension. But this is just temporary, This way only works when I use this extension on my borwser. But my users got this problem when they use in their own browser.
How to fix this from client side.
I don't think you can fix this issue client side. The API server controls who can access what (using the Allow-Control-Allow-Origin header) so you have to change it there.
The CORS (Cross-Origin Resource Sharing) Request should be enabled in your server i mean in your api like header("Access-Control-Allow-Origin: *");
, otherwise if you still want to access the request from another domain (localhost) if api host is different , in your js code try to use jsonp
here is the documentation
https://docs.angularjs.org/api/ng/service/$http#jsonp
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..
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