I have a problem enabling CORS on the site I've been working of for the past few weeks. Both on the local and production version on the site. I'm trying to do cals to the Google Places API. The development workaround has been a google chrome plugin but this is obviously not a solution for a live site.

I've tried enabling it with PHP both with a WordPress hook:

add_action( 'init', 'allow_origin' );
function allow_origin() {
    header("Access-Control-Allow-Origin: *");
}

As well as just adding it directly to my header.php file

header("Access-Control-Allow-Origin: *");

I've also tried the .htaccess approach without any success. Anyone ran into similar problem before? Can not for the life of me figure this out

UPDATE:

The error I get in the console (Same on live site):

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJtyMN0fY62jARXZ6TrcPJ2gQ&key=MYKEY. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1' is therefore not allowed access

This is the information in my header:

General
Request URL:http://127.0.0.1/coffee/chiang-mai/
Request Method:GET
Status Code:200 OK
Remote Address:127.0.0.1:80

Response Headers
view source
Access-Control-Allow-Origin:*
Connection:Keep-Alive
Content-Type:text/html; charset=UTF-8
Date:Sun, 21 Aug 2016 10:52:41 GMT
Keep-Alive:timeout=5, max=100
Link:<http://127.0.0.1/coffee/chiang-mai/wp-json/>;             rel="https://api.w.org/"
Server:Apache/2.4.10 (Unix) OpenSSL/1.0.1i PHP/5.5.15 mod_perl/2.0.8-    dev Perl/v5.16.3
Transfer-Encoding:chunked
X-Powered-By:PHP/5.5.15

Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate, sdch
Accept-Language:sv,en;q=0.8,ru;q=0.6,en-US;q=0.4
Cache-Control:no-cache
Connection:keep-alive
Cookie:wp-settings-time-3=1470561673; wp-settings-    1=mfold%3Do%26libraryContent%3Dbrowse%26editor%3Dhtml; wp-settings-time-1=1471584008; _ga=GA1.1.1251830279.1460367542
Host:127.0.0.1
Pragma:no-cache
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N)     AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.76 Mobile     Safari/537.36
  • it is hard to guess what the problem might be if you do not add some information on what is that you actually see after you use the code. Did you checked the headers in the browser tools? you you get any erro?. Anyway the header file is generally not the best place to send to send headers, the init should work. Now, if the htaccess don't work then I am guessing you have a problem with the actual header you are sending, and not with where you send it – Mark Kaplun Aug 19 '16 at 9:04
  • just a stab in the dark but are you using prefixfree by any chance? – majick Aug 19 '16 at 10:20
  • Hey, updated the post with more information about my header and the error! – Tchernitchenko Aug 21 '16 at 10:54
  • I think that you just don't understand how cors work. If I got it right, it is google maps that should allow your domain to access it, not the other way around. – Mark Kaplun Aug 21 '16 at 16:17

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.