I am using Postal PIN Code API for getting Post Office(s) details search by Postal PIN Code in angular 5 application. Below is the url of the external API :
http://postalpincode.in/api/pincode/{**PINCODE}**
I am issuing a GET request from the application but it is giving me below error :
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access
Although this request is working perfectly fine from browser and postman. I understand that we need to configure our server with cross-domain policies for accepting cross-domain request but this is an external API and I don't have control over it. How can I resolve this issue?
Thanks in Advance !!
Best: CORS header (requires server changes) CORS (Cross-Origin Resource Sharing) is a way for the server to say “I will accept your request, even though you came from a different origin.” This requires cooperation from the server – so if you can’t modify the server (e.g. if you’re using an external API), this approach won’t work.
Modify the server to add the header Access-Control-Allow-Origin: * to enable cross-origin requests from anywhere (or specify a domain instead of *). This should solve your problem.
2nd choice: Proxy Server If you can’t modify the server, you can run your own proxy. And this proxy can return the Access-Control-Allow-Origin header if it’s not at the Same Origin as your page.
Instead of sending API requests to some remote server, you’ll make requests to your proxy, which will forward them to the remote server.
Here are a few proxy options.
Ref: https://daveceddia.com/access-control-allow-origin-cors-errors-in-angular/
I have a setup where a client application is running on a different domain (http://www.example.com) than the server application (http://www.example2.com). I've got the cross domain AJAX requests working except that I cannot figure out a way to send cookies with the request without having to add the Access-Control-Allow-Origin response header for each possible domain. Is there a way to set this up without having to specify a list of domains in that header? I'm aware of the security implications so I guess what I'm really asking is ... is there another framework separate from CORS that I can use which will allow this type of setup and at the same time allow any domain for the client application? I tried JSONP but that did not work out (could not send the cookie with the JSONP request). Is there something else I should try other than CORS and JSONP? Thanks.
EDIT: This is not a duplicate of the question mentioned in the duplicate notification. I'm already aware of the withCredentials flag. The problem is that I don't want to have to specify a list of domains in the CORS response header. I want something equivalent to setting that value to '*', but setting it to '*' is not allowed if sending a cross domain AJAX request that contains cookies.
I am running a local webserver, which runs an XHR request to an ngrok server, also run from my PC.
I'm getting XMLHttpRequest cannot load http://foo.ngrok.io/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
It appears the ngrok FAQ mentions CORS headers, but only in relation to basic auth - it doesn't mention how to set the headers so I could test my app in development.
How do I change ngrok's CORS options to allow loading requests from localhost?
UPDATE: different use case. BOUNTY FOR THIS SOLUTION:
I am getting the following error:
login.php:1 Access to XMLHttpRequest at 'http://localhost/lagin/public/login.php'
from origin 'http://062b-96-230-240-153.ngrok.io' has been blocked by CORS
policy: The request client is not a secure context and the resource is in more-
private address space `local`.
I've looked at Configure ngrok's CORS headers but still not sure how to proceed. When I tried ngrok http -host-header=rewrite 80 it says header not defined.
I've looked at 10 or 12 youtube videos and they all do a great job explaining what CORS is but an awful job explaining how to fix it.
I'm running virtualbox on a windows 10 machine and create a linux virtual machine. On the linux side I am running xampp as a local server.
I am happy to provide more details but I just don't know what additional information is needed.
I am able to see the login page of my site on ngrok but as soon as I make a axios call I get the above error.
Also, I tried //flags/#block-insecure-private-network-requests in chrome and set to disable. When I do that I no longer get the error but the site doesn't work.
ADDITIONAL INFORMATION:
I spoke to ngrok and they say: ...it sounds like your app is trying to call localhost somewhere in a ajax request. You will need to adjust that call to ensure it is being routed through ngrok.
here's what I'm doing:
responseData = sendData2('http://localhost/lagin/public/login.php',emailPass);
and here’s sendData2 (just for completeness)
function sendData2(url,emailPass){
let bodyFormData = new FormData()
for (const [key, value] of Object.entries(emailPass)) {
//console.log(key,value)
bodyFormData.append(key,value)
}
return axios({
method: 'POST',
url: url,
data: bodyFormData,
headers: {'Content-Type': 'multipart/form-data'}
})
.then(function(response){
return response.data
})
.catch(function(response){
return response
})
}
UPDATE: Each time we tunnel into ngrok we get an address like https://2634-96-230-240-153.ngrok.io If we change the send2() call to
sendData2('http://96-230-240-153.ngrok.io/lagin/public/login.php',emailPass);
it works but this requires I change the code each time I have a new tunnel. Would adjusting the CORS policy get around this problem?
I just stumbled across this issue today and was able to resolve it by starting ngrok and including the -host-header flag.
ngrok http -host-header=rewrite 3000
From the docs:
Use the -host-header switch to rewrite incoming HTTP requests.
If rewrite is specified, the Host header will be rewritten to match
the hostname portion of the forwarding address.
First of all ngrok is just a tunnel and not a server so configuring CORS header in ngrok is not at all possible. So any kind of CORS configuration needs to be done at the server level.
For example if you are using a nginx server, you need to configure header in the nginx conf file like:
location / {
/*some default configuration here*/
add_header 'Access-Control-Allow-Origin' '*';
}
By adding this header, you say that cross origin access to your address is allowed from any address as the value of the header is '*'. You can also specify a particular address for which the access to your address is allowed by replacing the value.
For me, in addition to setting up the server, you also need to add to the header on each request sent from the client side
"ngrok-skip-browser-warning": true
With Webpack / react, I used the 'requestly' Chrome extension and set up a rule from the Bypass CORS template. Note that after selecting Templates > Bypass CORS, you need to click Create Rule in the top right of the dialog.
Then fill in the section at the top, "If domain contains <your domain" and make any other configuration changes, then you can save your rule.
If you are using ngrok with nodejs/express.js .
Use this code:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "YOUR-DOMAIN.TLD"); // update to match
the domain you will make the request from
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-
Type, Accept");
next();
});
Replace "YOUR-DOMAIN.TLD" with "*" to give access to all urls OR your specific website url.
Refer to https://enable-cors.org/server_expressjs.html for more details
Getting ngrok to work took a little time to figure out but it's actually quite easy.
In chrome there is an option to turn off CORS. In the chrome address bar go to
chrome://flags and look for Block insecure private network requests.
This needs to be disabled.
Second, in my ajax request I had used an absolute path and this needed to be changed
to a relative path.
REMEMBER:This is for running localhost and exposing it to the web
Let's say that I own 2 domains www.xyz.com and ajax.xyz.com. I'd like to load my HTML and javascript from the site with prefix www and then execute an ajax request to the site prefixed with ajax. Will the same origin policy block my ajax request from www.xyz.com to ajax.xyz.com or will it work without using the Access-Control-Allow-Origin header.
Regards
Subdomains are considered different domains, you'll have to set the CORS headers
I've a server named, foo.com where my application is running and accessing a service available on a different domain bar.foo.com.
With the simple XHR request to bar.foo.com/getUsers, I'm getting an error saying, No 'Access-Control-Allow-Origin' header is present. I do not want to use JSONP as a fallback to cross-domain issue.
Is there any easy fix I can do on server level to enable cross subdomain requests while XHRing?
It appears that I need to set allow-cross-domain headers on server when a response is returned as suggested by #Blender above.
Or I can use xdomain library which uses PostMessage API to enable cors. With this I can even read iframe's content served by different domain.