I'm using Wamp as my local server while I test my Angular app.
I am using $resource to get some api data from my server but I'm getting a message
XMLHttpRequest cannot load http://myproj.herokuapp.com/api/projects?name=demo.
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 401.
I've searched far and wide on the web but I cannot find a working way to get around this.
Any new fresh ideas? Has anyone overcome this issue?
how to allow ACCESS-CONTROL-ALLOW-ORIGIN aka cross-domain on wampserver
This author got it right.
"You have to enable the headers module first, like so :
click on the wamp icon in your systray
go to Apache > Apache modules
check the option 'headers_module'
And then include this in your apache config:
Header set Access-Control-Allow-Origin: *
(in httpd.conf or in the configuration of your vhost)
(Instead of the * you can also specify a specific domain)"
Then bring up your browser, and use localhost/filename to access your files.
Related
I have react app what I already deployed to the GitHub Pages.
But now I have a problem: what I am requesting auth status to server and didn`t get any response. What is the problem?
I have this error in console about my requests
has been blocked by CORS policy:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource
GitHub pages supports CORS since 2015, so you can follow "Fix CORS Error| React Tutorial" which points to:
"Run Chrome browser without CORS" (not recommended, just for testing)
axios/axios issue 853
That last issue mentions:
cURL does not enforce CORS rules. Those rules are enforced by browsers for security purposes.
When you mention that you added the relevant header, I assume you mean you added those headers to the request.
Actually, the header is expected in the response headers from the server, indicating that the resource is allowed to be accessed by other websites directly.
FYI, CORS - Cross Origin Resource Sharing. Since your API does not support it, you have two options -
Use a proxy server on the same domain as your webpage to access 4chan's API or,
Use a proxy server on any other domain, but modify the response to include the necessary headers.
I'm using ReactJs and Axios to send API requests to my server but I keep getting the same error:
Failed to load http://***: Response 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. The response had HTTP status code 400.
I'm trying to perform a POST request. I've also tried to download a Chrome Plugin to allow CORS. It did work for the GET requests, but not working for POST it looks like.
If I try to make requests to https://jsonplaceholder.typicode.com/users it's working fine. So I guess there's something wrong with the server.
My server is using Nginx and is on a CentOS 7 OS.
Q: How is it possible to enable CORS just for my local development (localhost) or specific websites?
EDIT: I have already tried using this config on my Nginx server - without luck: https://enable-cors.org/server_nginx.html
While I can't answer you with some specific code, here's what happens (at least what happened last time I tried Angular and had similar issues):
Before sending any further requests, there'll be a header only OPTIONS HTTP request sent to the server URL. When answering this call, the server is supposed to send a header field Access-Control-Allow-Origin containing a whitelist of domains allowed to do further calls using the API. To whitelist all requests in your dev environment it should be enough to set Nginx to answer with Access-Control-Allow-Origin: *.
For development I use the Firefox extension CORS Everywhere. It modifies all web traffic, to include the correct CORS headers. (It works at least with the somewhat dated Firefox in Opensuse 42.3.)
https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/
Note, that this subverts a security mechanism of the browser.
For deployment you must configure the server, to send the correct CORS headers. (I did never do this, the finished website is planned to work in a single IP.)
If you have access to the server and the server is using Nodejs, this should work for you:
CD into your server folder:
cd server-folder
Then run this command in order to install the 'cors' package:
npm install cors
In order to access this package, go into your server file in your IDE and in the next available line:
const cors = require('cors');
Next, add this line to use the middleware (assuming you are using Express):
app.use(cors());
I'm trying to fetch the list of official images from docker hub using v2 api. If I try to do curl or use postman, I get the response correctly, but when I try to fetch the list using angularjs service, I get the following error
XMLHttpRequest cannot load https://hub.docker.com/v2/repositories/library/?page=8&page_size=15. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.plnkr.co' is therefore not allowed access.
Can someone suggest solution for this. How can I enable cors for this?
CORS could be enabled on the server side, and this is not your case. What you could do is :
1) use a proxy, for instance NGNIX, and make Sure that all request Made to localhost/whatever are redirected to hub.docker.com . This way you can "cheat" Cross-origin block
2) if you need a temporary and dirty solution you could more simply install chrome/safari plugins to bypass CORS security check
There is only one way to bypass CORS is send request through a cors proxy like http://crossorigin.me
It's an opensource project and you can build your own proxy server by download the full source code from here: https://github.com/technoboy10/crossorigin.me
Reason behind the issue :
As per my understanding you are doing an AJAX call to a different domain than your page is on. So, the browser is blocking it for security reasons as it usually allows a request in the same origin.A tutorial about how to achieve that is using CORS.
When you are using curl or postman they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest:
Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.
I made a website in angular which consumes ASP.NET Web Services. I followed this tutorial: Tutorial.
I used the same code as there and when i make an registration it is ok and the user goes in the database but when i try to login i get that massage in the console:
XMLHttpRequest cannot load localhost:16270/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:50357' is therefore not allowed access.
I know the reason (i am not allowed to make CORS request) but for the register i am not allowed too but somehow the code overrides that but this doesn't work for the login. I searched google tried many things but nothing really helped. I tried to enable CORS, tried to send Access-Control-Allow-Origin: * to the response header but nothing changed. I know that i must add: Access-Control-Allow-Origin: * to the response header but how to add response header on Web Service that i didn't created (i am talking about http://localhost:16270/token). I didn't created that service and it needs header to be added to its response. How can i made that ? Or i should do something else to make the things work?
If in producation you web app and service is going to be on same domain then this issue won't be raised.
If you just want to resolved it temporary for development the you can add
access control allow origin chrome extension or you can open chrome with web-security disable by just opening a new chrome session from command prompt
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
I have setup the Ionic development environment using Yeoman generator (https://github.com/diegonetto/generator-ionic). Everything is works well.
The problem is on Sever side request, I am getting the Cross-Origin Request Blocked error.
I add below link in .htaccess file and AngularJS app.js, still getting same error
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers: Authorization
AngularJS Provider
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
$httpProvider.defaults.withCredentials = true;
Error Message I am getting is
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at
http://192.168.1.18/tracker/user/login.
This can be fixed by moving the resource to the same domain or enabling CORS.
Screen of Request & Response Header
Please guide me any configuration need to be changed for enabling CORS. Our server side framework is Zend 1.x
The cross origin is forced by your browser, running the application from any distributed phone should not be blocked with your current settings.
To allow communication between your "served to browser" app to your server use a browser plugin
Allow-Control-Allow-Origin: * Chrome Plugin do the work
I have changed the .htaccess files as below and its worked out, Google Chrome is not accepting the '*', so I specified the exact URL
Header set Access-Control-Allow-Origin "http://localhost:8100"
Header set Access-Control-Allow-Credentials: true
While I don't have experience using Zend with Ionic, I did experience this issue when interfacing with an IIS hosted REST API via Ionic.
For me, I had to add "Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS" server side in addition to what you already have.
After adding the 'allow methods' header, I was able to fully utilize my API.
If this doesn't get it for you, report back and I will dig a bit deeper in my project to see if I've forgotten a client side change that were also required.