I guess the question says it all, but the thing is that there are some anomalies here :|
When javascript tries to fetch the search results I get this error:
Firefox(Firebug):
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:9200/index/type/_search. (Reason: CORS request failed).
Chrome:
POST http://localhost:9200/index/type/_search net::ERR_CONNECTION_REFUSED
This is a totally anticipated result, so I googled the solution and found it.
So I added the following lines to the config:
http.cors.allow-origin: '*'
http.cors.enabled: true
And it kinda fixed the problem. Here's the strange part: The app is on a web server, which I access using, let's say, http://whateverdomain.com. So the origin of the javascript would be http://whateverdomain.com and not localhost, thus the problem. Well if that's the case, how come I can interact with elasticsearch, on the remote server, using Sense on my local machine? Isn't my global IP considered cross-origin????
It might be of importance to mention that in sense, i access the server using its IP.
The problem was that when I initialized elasticsearch-js, i used the default host, unchanged, which was localhost, and localhost on js means my local machine.
Changing that to my domain solved the problem.
Related
I am trying to access this address:
http://52.208.91.209:3000/?paging=1
Accessing manually works fine.
Accessing via an Angular 4 request returns:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.
I have googled it for a few hours and did not find a solution.
The only "solution" I have found is using Allow-Control-Allow-Origin plugin.
The address I am trying to access is not mine.
I am just trying to work with it.
I have even read about proxies when using ng serve with angular CLI but didnt fully understand.
All of the solutions I saw are simply a response headers problem on the server side. However, This is NOT my server so I cannot configure it.
Any help would be appreciated. Thank you.
You can change your frontend JavaScript code to instead make the request through a public proxy.
To try that, change your code to use the following URL:
https://cors-anywhere.herokuapp.com/http://52.208.91.209:3000/?paging=1
That’ll cause the request to go to https://cors-anywhere.herokuapp.com, a open CORS proxy that sends the request on to the http://52.208.91.209:3000/?paging=1 URL you want.
That proxy gets the response, takes it and adds the Access-Control-Allow-Origin response header to it, and then finally passes that back to your requesting frontend code as the response.
So in the end because the browser sees a response with the Access-Control-Allow-Origin response header, the browser allows your frontend JavaScript code to access the response.
Or use the code from https://github.com/Rob--W/cors-anywhere/ or such to set up your own proxy.
You need a proxy in this case because http://52.208.91.209:3000/?paging=1 itself doesn’t send the Access-Control-Allow-Origin response header—and in that case your browser will not allow your frontend JavaScript code to access a response from that server cross-origin.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS has more details.
You can't access that API the way you want to from the browser. There are security measures in place to prevent this from happening. If you do not control the source of the data, you cannot do anything to fix this. Your only option is to have your own server request the data, and you then go through your server to get the data.
Edit: You actually can do this if you only plan to run it locally. Chrome has flags to ignore this security measure. If you don't plan on using this on any machine other than your own, you can force chrome to allow this locally.
The solution I've found was to build my project with the right host using
ng build --production -host=myDomain.com
I am facing a strange issue. I have a java spring app running on the PORT 8080 and Angular app running on port 3000. While making the request its returning status 200 and can find response in the browser network tab, but console is throwing error XMLHttpRequest cannot load 'http://localhost:8080/apiname'. No 'Access-Control-Allow-Origin' header is present on the requested resource. origin 'http://localhost:3000/#/home' is therefore not allowed access. Is there any way to get this working without making any changes on the server side. Any help is appreciated
It sounds like you have one service on your machine trying to talk to another, and for whichever reason they don't identify as being in the same domain. Usually you will have to add a cross domain policy for domains that aren't within the same environment.
The Access-Control-Allow-Origin header is a CORS standard that instructs you who can send communication over cross domain policies.
You can only host one website on port 80, and it wouldn't quite make sense to have two sites. One SSL(443) and one HTTP(80) so this may be why it's in effect, are because of your ports.
For the simple answer, add the header into your server side response and be sure to add that domain and port, to your cross domain policy.
I'd encourage you also to try to look at why you're having to perform these communications. You could put the two services into one site and remove the need. That's your easiest answer for a non-server change.
Otherwise, you will have to add it. It's a security protocol. There are steps to remove it, but that would open you up to a myriad of security vulnerabilities.
Use the following link to read more, and you can use * as opposed to disabling for another approach.
https://enable-cors.org/server.html
Access-Control-Allow-Origin: *
The above header will allow all cross domain policies, implemented server side.
You can enable it in firebox by adding extension
https://addons.mozilla.org/en-US/firefox/addon/cross-domain-cors/
You must enable CORS headers server-side or use a proxy (own, or a simple service like crossorigin.me for development purposes) that serves proper CORS headers.
In order to enable CORS in Express.js app, please see cors middleware - for simple use cases, a single line of code is enough - app.use(cors()).
For desktop or in-app usage, you may ignore CORS headers if you like as you have greater control over HTTP client.
Situation:
I have a production web server, let's say https://example.com, configured with CORS with limited set of allowed origins. The set does NOT include localhost origins.
On localhost, developers develop a page/module/whatever that needs to call the production web server via AJAX (even during development). To do that, they run Chrome with CLI arguments --disable-web-security --user-data-dir=chromeNoCors so that Chrome would send AJAX without Origin header.
The problem is that only GET requests are sent without the header. POST requests still contain the header, therefore the production server compares the header value (http://localhost:5678) with allowed set of origins and forbids access to requested resource.
Question:
Is it possible to somehow prevent sending of Origin HTTP header altogether?
I'm aware that there's a workaround to solve this situation by allowing "localhost" (or some specific host that developers will have to add to their /etc/hosts) to the set of allowed origins on production server but I'd like not to do this if possible.
if you guys use chrome try this extension
https://chrome.google.com/webstore/detail/requestly-redirect-url-mo/mdnleldcmiljblolnjhpnblkcekpdkpa
you can modify requests on the fly,even headers
I recommend that you setup a simple "proxy server" (short node.js or python script would suffice). Have this server forward all requests to your remote API server but delete the information about the origin in headers. This is a matter of simple regular expression.
This is simple solution that will be portable to different servers. On AJAX side, all you need is to change the hostname to localhost or IP of your testing proxy server.
I want a simple javascript script that exists on my localhost to make a connection to another domain(eg: anotherdomain.com) with ajax and get the response , but all my browsers tell me that error of (connection blocked , Reason: CORS header 'Access-Control-Allow-Origin' missing)
but when I check the network traffic with network monitor program like (fiddler), I see that the response already came from the server at (anotherdomain.com) to my local machine , it is just my browser who is blocking me from getting it !!
1- can I order my browser to ignore the CORS rules using javascript code?
2- what is my options to overcome this problem? is building a custom client disktop application with c# to send and receive requests freely is the best way to do it?
3- is CORS policy designed to protect the web clients or the web servers ?
thank you, and please consider that I'm complete newbie in web
but when I check the network traffic with network monitor program like (fiddler), I see that the response already came from the server at (anotherdomain.com) to my local machine , it is just my browser who is blocking me from getting it !!
Well for sure, the connection was estabilished to check the presence of the header you mentioned, but data was unlikely to be transferred.
Regarding your questions,
There are 2 options actually. One is to set the Access-Control-Allow-Origin header with proper origin according to yours. The second is to make a JSONP call, though the response of server must support such a solution.
The best option is to have a server with the above header specified. Your server would handle all the network stuff on its side and your script would just get/send some responses/requests.
I would say it designed more to protect the server. Imagine the following situations. Your script on your site makes a lot of POST requests to the another site. Actions like submitting forms etc. could happen and would be allowed. That's harmful, right? You can read about that in this stack question.
I have a NodeJS server running on my machine, and I am trying to access it with ajax from a website running on the same machine. I have getting a cross domain error though:
XMLHttpRequest cannot load http://localhost:3000/games. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
I have access a different api on this machine, running with php, which the address is
http://localhost/games.
My thinking is that because the nodejs server is running on a different port to apache that is causing the cross domain issue?
Any insight would be great, im new to api development and not sure where to go from here.
It has been suggested to me that I should try use JSONP, but im not sure if this is technically needed, since the api is running on the same machine?
An origin is defined as a combination of URI scheme, hostname, and port number so you're indeed breaking the same origin policy performing a XMLHttpRequest from http://localhost to http://localhost:3000
I'm not very familiar with nodejs but I see five options:
Obviously the easiest thing would be run everything on the same port, not sure if this is possible or not on your scenario.
Use JSONP (only valid for GET requests)
Implement CORS headers (it has some compatibilities issues with IE <= 9 + other corner case anomalies)
Implement a proxy to always communicate to http://localhost from client. Let the proxy deal with http://localhost:3000 and return response to client.
Use an alternative to perform cross domain request as XDomain
Since you need to be able to send POST requests, your only options are:
Implement CORS
Reverse Proxy
php proxy (or whatever language you are using for serving html pages)
The easiest would be to implement CORS if you are using express. Most of the work is done for you, all you would need to do is include the cors module and attach it as middleware.
Reverse proxy is the next solution to look at. What it does is it takes all requests to a given domain or domain/folder and reroutes them to the specified domain, in this case your node server running on a different port. For example, you would route all requests to http://localhost/api to http://localhost:3000. Research Reverse Proxy for the webserver you are using.
The third solution would be to have the webserver serving html also send requests to the node server. I consider this to be a bit too hacky for my tastes because the above two solutions are easy to implement and don't add additional code to the html webserver. However, if you didn't own the target webserver, this would be the only option if the target webserver didn't support CORS.