I'm developing an app with php and html5 and I want to access some data from my remote server via ajax. I read from the web and learnt I had to include .htaccess at the root level of my remote server which I've done that but when I try to access from info it gives me this error:
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 404.
I'm using chrome for debugging the app.
This is how my files look:
.htaccess
# <IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
# </IfModule>
ajax
$(document).ready(function () {
$('#read').load('http://mywebsite/appsfolder/sample.php');
});
As Samurai8 mentioned in a comment, uncomment (that is, remove the '#' from the beginning of each line) the part of your .htaccess file that you posted. Your server will only send the header when that block is uncommented.
Related
I'm working on an angular application which should connect to an Apache backend.
The apache REST API is working propperly and I can use it over Postman, but I haven't managed to consume it from my angular application due to CORS problems which are driving me crazy. I have checked everything, but the error persists and I can move forward.
Let me explain the environment and situation:
The app is sending a POST Request to the backend. I have tried sending and not sending the header 'Access-Control-Allow-Origin':'*', but it fails in both cases.
The apache headers are already enabled.
The apache2.conf file doesn't include any configuration of the headers regarding this problem.
The .htaccess file of my site is empty.
The apache config site for the site of the API is:
<Directory "/home/javierd/test">
Options Indexes MultiViews FollowSymLinks
AllowOverride None
Order deny,allow
Allow from all
Require all granted
Header unset Access-Control-Allow-Origin env=AccessControlAllowOrigin
Header unset Access-Control-Allow-Methods env=AccessControlAllowOrigin
Header unset Access-Control-Allow-Headers env=AccessControlAllowOrigin
Header unset Access-Control-Expose-Headers env=AccessControlAllowOrigin
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
</Directory>
Alias /test "/home/javierd/test/html/www"
As far as i know, this should work, but everytime I try to access the API I get
Access to XMLHttpRequest at 'http://localhost/test/rest' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.
And I don't really know why there are mutiple * values.
I have also tried with simpler configurations, using just Header set Access-Control-Allow-Origin "*" (without the always). With this config I get a similar CORS error:
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
However, as I mentioned previously, the API is working with postman.
I have also tried using a proxy with the angular cli, but I endup getting 404 errors although the logs show that the proxy is working. My proxy config file is the following one:
{
"/test": {
"target": "http://localhost/test",
"secure": false,
"changeOrigin": true,
"logLevel": "debug"
}
}
but the logs show
[HPM] POST /test/rest/login -> http://localhost/test
so I don't really know if the petitions are being redirected or not.
I know there are lots of questions regarding CORS and Apache/Angular, and I have read lots of them, but I can't figure out a solution.
Could somebody help me?
Thanks a lot!
it's restrict you web browser localhost you can disable web security if you are using chrome
Win + R
then run this cmd
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
I have set up an API using php, so that other web sites can query a DB on one of my server. When I want to make a test with a client page, I get this:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.example.net/my.php?fx=221&ix=603. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
.... .......
Reason: CORS header 'Access-Control-Allow-Origin' missing
I understand, according to this document, that I need to specify who is allowed to use the API.
Adding something like this:
Access-Control-Allow-Origin: https://amazing.site
But what is less clear is where I should add this.
Is it at the apache server level? Or is it in my php page on the server side? Any hint would be appreciated.
In Apache/conf/httpd.conf add code of below:
<IfModule headers_module>
Header set Access-Control-Allow-Origin "https://amazing.site"
</IfModule>
Make sure you have to uncomment of "LoadModule headers_module modules/mod_headers.so" in the same file.
You also can do it in every php file top:
header("Access-Control-Allow-Origin: https://amazing.site");
I am testing rest api in SugarCRM. In order to use crm rest api, I added :
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
to .htaccess file and rebuilt .htaccess File. However, it did not give me solution. I am still getting error message with the following content:
XMLHttpRequest cannot load http://test.crm.loc/custom/clients/base/api/get_account.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
How can I fix it?
I found the answer. I put following code to the top of rest api code file:
header('Access-Control-Allow-Origin: *');
It worked for me.
I am trying to login with ajax to an API and I get this error:
XMLHttpRequest cannot load. The 'Access-Control-Allow-Origin' header
has a value that is not equal to the supplied origin. Origin
'http://localhost' is therefore not allowed access.
I read all about this error, all over the internet, and I've tried all the solutions I could find online. I modified the .htaccess and apache httpd configuration file according to the CORS instructions here: http://enable-cors.org/server_apache.html
Access-Control-Allow-Origin: *
Nothing seems to be working. I'd really appreciate if you guys can help me out with this. Thank you!
You have to set Access-Control-Allow-Origin header to * or specified value http://localhost
You can do this through:
1- Your code
2- .htaccess file
3- Server config (restart web server required)
Here is the link that show how to do it on apache
http://access-control-allow-origin-guide.com/enable-cors-on-apache-linux/
As added browser security, unless the API allows cross-browser origins in the the return responses header there is no way around this.
The browsers are blocking it, there is a plugin to allow for chrome but it is not realistic to depend on browser plugin to allow end user requests,
Try and reach out to the API provider and see if they can look into updating the header in the response.
It is a CORS issue:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
i use htaccess file for load JSON data in different hosting, and its works but
it have to put inside the public html root of our web hosting for example
uploading .htaccess into --> (https://freehostingsomewhere.com/)
then inside .htaccess
<FilesMatch "\.(ttf|otf|eot|woff|jpg|png|jpeg|gif|js|json|html|css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "http://localhost"
</IfModule>
</FilesMatch>
in here i use http://localhost to development and it works,
maybe if i have another web host just change it into that url, i will try it later (it can, i already try it) :p
this is just for more clear explanation
cheers :p
Are your requests using either cookies or authorization by any chance?
Check on your ajax call on the client side if you're configuring it to be done "with credentials"
.withCredentials = true;
If yes, the wildcard(*) will not work and you'll need to provide the exact host as the value for Access-Control-Allow-Origin.
Refer to this stack overflow answer or Mozilla Documentation on CORS
I'm trying to use the glyphicons provided by Bootstrap 3.3.6 but Chrome is blocking the access to them with this error message:
Font from origin 'http://[::1]' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
This is my .htaccess:
<IfModule authz_core_module>
Require all denied
</IfModule>
<IfModule !authz_core_module>
Deny from all
</IfModule>
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
What am I doing wrong? Am I editing the wrong .htaccess?
I also tried adding header("Access-Control-Allow-Origin: *"); at the beginning of my header.php file but that didn't work either. I'm out of ideas.
The folder structure is like this:
application
controller
model
view
header.php
index.php
footer.php
.htaccess
system
assets
css
fonts
images
js
I found the issue: I didn't set the base_url in the config.php from CodeIgniter. After setting it everything works.
You need to add the base URL to your configuration file:
$config['base_url'] ='http://www.urlname.com';
We can set this way so we can move any server no need to change try this one.
$config['base_url'] = 'http://'.$_SERVER['HTTP_HOST'].'/';
Allowing cross-site scripting may cause security issues, try to adjust your codeigniter options;
1.) Go to application/config/config.php file,
2.) find $config['base_url'] = ""; and
3.) place your project folder's path as value. $config['base_url']="http://localhost/yourProjectFolder/";