$http Cross domain access issue exists in header - javascript

A request is sent through Angularjs $http with JSON data to my REST service. When the response is returned, required headers are set as following,
Response.ok()
.entity(emp)
.headers.add("Access-Control-Allow-Origin", "*")
.headers.add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")
.allow("OPTIONS").build();
But when I send a post request without data,
$http.post('localhost:8000/employer/register')
it is successful. With data, it fails.
$http({method: 'post', url:serverUrl, data:{name:'abc'}, headers:{'Content-Type':'application/json'} });
This is my Rest service
#Path("/register")
public class EmpService{
#Get
#Path("test")
#Produces
public String test(){
return "works";
}
#Post
#Consumes(MediaType.APPLICATION_JSON)
public Response addEmp(Emp emp){
return Response.ok()
.entity(emp)
.headers.add("Access-Control-Allow-Origin", "*")
.headers.add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")
.allow("OPTIONS").build();
Browser console is as following.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8081/employer/register (Reason: CORS header 'Access-Control-Allow-Origin' missing).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8081/employer/register (Reason: CORS request failed).
UPDATE: I found that service is not invoked as no Sys.out.println gives any logs.
Anyone know where the problem is?

Don't add the headers inside the resource method. Why? The preflight is an OPTIONS request, which is the "pre"-request to get the access control headers. And you don't have an OPTIONS method. The browser will not call the #POST method to get the access control headers. For this reason, you should be using a filter instead, and set the headers there.

Try this.May be your api route of server not allowed headers data that may be caused problem
$http.post(url:serverUrl, data:{name:'abc'} } );

Maybe you should be sending a header not allowed by the server.
Try this:
headers.add("Access-Control-Allow-Headers",
"Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, otherCustomHeader");

Related

CORS is blocking response for no reason

I am making POST request to my server and browser is blocking response with CORS policy (missing Access-Control-Allow-Origin header), but when I request the same url via Postman the header is there. This are my response headers from Postman:
And this is browser (chrome in this case) error when I try to do POST request:
What it's going on?
In case of non-simple request, browser make preflight OPTIONS request to the same url to check if the server allows cross-site requests. So adding new route for OPTIONS requests where I allowed all CORS restrictions solved the problem.
...
if (webServer.method() == HTTP_OPTIONS) {
webServer.sendHeader("Access-Control-Allow-Origin", "*");
webServer.sendHeader("Access-Control-Allow-Methods", "*");
webServer.sendHeader("Access-Control-Allow-Headers", "*");
webServer.sendHeader("Timing-Allow-Origin", "*");
webServer.send(204);
} else {
...

CORS - Response to preflight request doesn't pass access control check

I am trying to send a GET request to a server (the server and the local host have the same domain), however I keep getting the following error:
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
This is the code I use to send the request
$.ajaxSetup({
headers: {
'Access-Control-Allow-Origin': "*",
'Access-Control-Allow-Methods': "GET, POST, PATCH, PUT, DELETE, OPTIONS",
'Access-Control-Allow-Headers': "Origin, Content-Type, X-Auth-Token"
}
});
$.get(myurl, function(data) {
console.log(data);
});
I not sure how to fix this error, since I'm new to web development.
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
The Access-Control control headers have to be sent by the responding server. Depending on the response and requesting page, browser may allow the request to proceed, out just show the error you got.
If adding the headers was enough, any CORS policy would be moot: any page could access any resource.
the server and the local host have the same domain
I'm not sure what you mean here, but apparently your page is loaded from a different domain than myurl points to.
The Access-Control headers should be sent by the server, not by the client.
You have to set Access-Control in your server app, If your back-end is on java then you can use filter to set Access-Control headers

Response to preflight request doesn't pass access control check NodeJS/Heroku/Express

I'm using an Express app on Heroku. I try to make a RESTful request to it from another NodeJS app.
Here's a snippet from the Heroku app, called app.js:
var express= require("express");
app.get("/results",function(req,res){
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS");
});
And here's a snippet from an app I run locally, local-app.js:
var request= require("superagent");
var req= request.get("http://url-to-app-js.com?query=1").set(
"Access-Control-Allow-Origin", "http://url-to-app-js.com",
"Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS",
"Access-Control-Allow-Headers", "Content-Type, Authorization, Content-Length, X-Requested-With"
);
req.end(function(err,res){
// do things
});
When I run local-app.js, I got this error in my browser console: esponse to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
I know that I could run the browser, Chromium, with certain security settings turned off, but I need to be able to run this without doing so.
What am I doing wrong? How do I fix it?
Access-Control-Allow-Origin, Access-Control-Allow-Methods, and Access-Control-Allow-Headers are response headers. They shouldn't appear in the request at all.
By adding non-standard headers you make the request a preflighted request instead of a simple request. (You might be doing something else that makes it a preflighted request, but the extra headers definitely do not help).
A preflighted request sends a OPTIONS request to find out if it is allowed by CORS before making the request (GET in this case) you actually want to make.
You are only setting the CORS response headers when you receive a GET request. Since you don't respond with them to the OPTIONS request, the browser refuses to make the GET request.

No 'Access-Control-Allow-Origin' header is present in Rails API backend

I have a jsonapi-resources backend api in Rails. I am able to request data using curl as well as in Python.
When I try using jQuery for the request I get the following error in the browser:
XMLHttpRequest cannot load
https://shop-api-3.herokuapp.com/customers?filter%5Bshop_token%5D=9e3c9769b752436ddbd27597cf946a36.
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'null' is therefore not allowed access. The response
had HTTP status code 404.
So I added this to config/environments/production.rb:
config.action_dispatch.default_headers = {
'Access-Control-Allow-Headers' => 'Origin, X-Requested-With, Content-Type, Accept, Authorization',
'Access-Control-Allow-Origin' => '*',
'Access-Control-Request-Method' => '*',
'X-Frame-Options' => 'ALLOWALL'
}
However, I'm still getting the same error. What am I missing?
FWIW, this is my curl command:
curl -i -H "Accept: application/vnd.api+json" "https://app.herokuapp.com/retentions?filter%5Bshop_token%
5D=ABC123"
Using Rails 4
I had this same issue a month ago and after reading a lot of blogposts, I solved it by...
So it looks like you are requesting an api token, on another server using jquery(from the browser) rather than doing this, request it from ur server and ounce you get it pass it to the client and then you can do whatever you want, this should do the trick.
My understanding of this CORS is you cant do browser to server, you have to do it from server(your domain) to server(the api that you are accessing).
Hope this helps!

Cross-Origin Request Blocked happened but all requests are to source domain [duplicate]

This question already has answers here:
Cross-Origin Request Blocked on
(5 answers)
Closed 6 years ago.
i have a problem in my site.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the
remote resource at http://example.com/index.php.
(Reason: CORS header 'Access-Control-Allow-Origin' missing).
when i search about this error, the reason was sending request to an external domain. but it's not my problem reason, because all of my request is right to the source domain.
my domain is http://example.com and all requests are to the http://example.com/index.php.
*UPDATE:
This was just because of i was in use some un-handled headers in my request, so when the preflight Option response received, there was no access allow to that header from server, so this error happened.
Access-Control-Allow-Origin: *
this might help put it in the header and if u want more than you can check.. here https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
Try adding below code in API controller constructor, it works for me.
ERROR : Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at [the url]
This can be fixed by moving
the resource to the same domain or enabling CORS.
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

Categories