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");
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 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
And not understand how fix this problem, web server - apache...
for example:
link.com - all good
sub.link.com - not good, in console error
Font from origin 'link.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'sub.link.com' is therefore not allowed access.
i tried add in .htaccess
<IfModule mod_headers.c>
<FilesMatch "\.(svg|ttf|otf|eot|woff|woff2|css)$">
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Credentials true
</FilesMatch>
</IfModule>
after this remove and add this
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
and without .htaccess, I tried add in index.php
header("Access-Control-Allow-Origin: *");
BUT NOT WORKING! I think this problem due to because CSS fots files use like
...
src:url('icons/fonts/journal-icons.eot');
src:url('icons/fonts/journal-icons.eot?#iefix') format('embedded-opentype'),
...
but I do not understand what I need to do to fix this problem??? (It looked similar questions but did not help)
There's a very clear error message in the Chrome javascript console:
Font from origin 'http://www.mss.partneris.net' 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://www.test.mss.partneris.net' is therefore not allowed access.
Add:
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
to your apache configuration for http://www.mss.partneris.net domain, restart apache, and go to http://www.mss.partneris.net/catalog/view/theme/journal2/css/icons/fonts/journal-icons.woff in your browser or using curl, and see that it has Access-Control-Allow-Origin: * response header. When it does, try again in the browser, and hopefully it will all work well.
I tried since 5 days to configure correctly CORS to solve the error :
So I tried to add :
header('Access-Control-Allow-Origin: *');
On my webservice (on the same server but different domain name), I got this error :
Request header field Authorization is not allowed by Access-Control-Allow-Headers
Then I tried to add :
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
To a .htaccess file that I created.
But still doesn't work.
Any idea ?
Thanks a lot in advance.
You must include an Access-Control-Allow-Headers header in your response with the proper acceptable header names, just as the error message suggests. It sounds like you do not know how to properly handle CORS requests. Please read this document on MDN, which explains how to handle CORS requests. This will answer all of your questions.