I am trying to consume a rest webservice (invoked by Talend Open Studio for ESB job) in an angular2 application but when i run my application, i get this error :
XMLHttpRequest cannot load http://localhost:8088/. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:3000' is therefore not allowed
access.
When I have this issue and i cant do nothing in server, i just use concurrently and corsproxy like dev dependencies in my package.
"concurrently"
"corsproxy"
and add this script to package:
"dev": "concurrently --kill-others 'corsproxy' 'ng serve -o'"
Now you need configure your angular project to make request to the proxy, in my case I add this line to my enviroments file:
apiBaseUrl: 'http://localhost:1337/serverUrlApi'
And in my Http interceptor add this line to all my request.
Related
I am creating a web API that returns JSON. Currently I am able to call the endpoint with jquery and php curl but I am not able to do so using JSP HttpsURLConnection.
It gives me a handshake_failure exception. Is there anyway that this can be solved without having to install a file in the jsp server ? I am doing a REST service so it doesn't make sense for all my users to install a file to call it.
Will this also affect the calling ?
In my Ionic 4 Angular project I get the following error when requesting a json file from a server in my iOS simulator.
XMLHttpRequest cannot load https://myServer.com/api due to access control checks.
cordova.js:1540
Failed to load resource: Origin ionic://localhost is not allowed by Access-Control-Allow-Origin.
In the Chrome Browser with Access-Controls-origin plugin I do not get the error. How can I fix this issue?
You need to add ("Access-Control-Allow-Origin", '*') header at the requested resource.
Follow this link - 3 Ways to Fix the CORS Error — and How the Access-Control-Allow-Origin Header Works. The first option (install the moesif CORS extension) worked for me.
CORS errors are common in web apps when a cross-origin request is made but the server doesn't return the required headers in the response (is not CORS-enabled). It only happens when you're running the app from your localhost for testing purposes.
I'm trying to consume a simple API just for test, but it doesn't work using Delphi Rest Clients components.
Call to API works using browser and Postman without any configuration. The URL is https://api.cartolafc.globo.com/mercado/status
First I've tried use the tool "Rest Debugger" and it returns nothing.
So I tried to use the trio of REST CLIENT components by doing the following steps:
Created a new project;
Added TRestClient, TRestRequest and TRestResponse components;
Configured BaseURL from TRestClient as "https://api.cartolafc.globo.com/mercado/status"
Clicked the right mouse button on the TRESTRequest component
Hit Execute... command
It returns the following error:
Error receiving data: (12152) the server returned an invalid or unrecognized response
Did I do something wrong?
Inside our company's VPN I can call the web service (which is a REST service) fine, on FF and Chrome. I need to connect to it from Angular 2 though. Now, I tried to call the REST service(which is inside VPN) from Angular 2, in several ways, and I am always getting the message about CORS("No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 401." in Chrome and "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://webwassvc-test.servizi.gr-u.it/essigEAIM/rest/monitoring/integrations/all?pag=1. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)." in Firefox). I tried setting the about:config:security.fileuri.strict_origin_policy to false, and it didn't help. The sysadmin on the REST server end told me he opened the server for CORS (cross domain) calls, so I think the problem is on my end, but I don't know what can it be. Any advice, please?
UPDATE: I can access the REST service and get the data from it, through PHP as middleware (localhost/angular2_site/file.php), but not from angular directly (localhost:4200).
Another option it's to manage it with a proxy or load balancer.
If you are developing with anuglar-cli you can use the Proxy To Backend support of the angular-cli. --proxy-config
from the angular-cli readme:
Say we have a api server running on http://localhost:3000/api and we want
all calls to http://localhost:4200/api to go to that server.
We create a file next to projects package.json called proxy.conf.json
with the content
{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}
You can read more about what options are available here
webpack-dev-server proxy settings
and then we edit the package.json file's start script to be
"start": "ng serve --proxy-config proxy.conf.json", now run it with
npm start
So at the end you can call your services as:
getUsers() : Observable<any>{
return this.http.get('/api/users').map(res => res.json());
}
I'm working on an ionic apps.
My problem is: when I try to get data from server I got this:
XMLHttpRequest cannot load https://mywebsite.com/api. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
I already try to add this to .htaccess:
<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin: *
</ifModule>
And this to my api page (PHP): header('Access-Control-Allow-Origin: *');
but still not working
$http.get(url).success(function(response) {...}
Put it on top of your PHP file like:
<?php
header("Access-Control-Allow-Origin: *");
// then your stuff goes here
?>
Note: as with all uses of the PHP header function, this must be before any output has been sent from the server.
This cors problem has a simple work around in ionic.
Go to your ionic.config.json (previously ionic.project) and add a proxy for example:
{
"name": "proxy-example",
"app_id": "",
"proxies": [
{
"path": "/api",
"proxyUrl": "http://cors.api.com/api"
}
]
}
After that use "/api/" instead of "https://mywebsite.com/api" when you call your api.
For more info:
http://blog.ionic.io/handling-cors-issues-in-ionic/
This is a typical error found when we work with Angular and Ionic, the problem appears because when your app loaded in a browser on your app loads all the content from an origin that comes from your local address http://localhost:8100, then when you want to make any AJAX request sent out to another host than localhost:8100 the request is called from an any point different from the origin its require a CORS(Cross Origin Resource Sharing) preflight request to see if it can access the resource.
The solution is use a Proxy To Backend, with this you can highjack certain urls and send them to a backend server. The implementation is easy:
1.- Modify the file ionic.config.json in the root folder of your project.
2.- Configure your proxy, inside your ionic.config.json file put this, assuming your new host is in http://localhost:3000.
"proxies": [
{
"path": "/endpoints",
"proxyUrl": "http://localhost:3000"
}
]
3.- In your Service change a little the path of your request from this http://localhost:3000/endpoints/any/path/that/you/use to this ../endpoints/any/path/that/you/use(assuming the another host is in localhost:3000 and the context is /endpoints)
If you need more information about this please check http://blog.ionic.io/handling-cors-issues-in-ionic/
premise: This issue is usually only running ionic serve, or using ionic as web app, not in ionic as app.
You can avoid to modify your project and use an extension to disable CORS:
For developing with chrome, something like this:
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related
or, if you need it for firefox, something like this:
https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/
IE and Edge sucks so for these you have to manually disable CORS in settings