Search code examples
angularjswordpressheadercorsdivshot

How to enable CORS on DIVSHOT?


I've been struggling with the Access-Allow-Control-Origin, I am using Divshot. In my mobile app I am displaying the posts of WordPress Account, when I test my app in the browser, I can see the posts, but once I open the app in Chrome for mobile, I am unable to see the posts. According to what I saw, there is some people with the same issue, so I need to use CORS in the Divshot config file.

In the Divshot page, this is what they say, but I don't know how to do it in my app

Custom Headers
If you need to set custom response headers for specific routes,
you can use the headers key in your configuration file:

{
  "headers": {
    "/cors-stuff/**": {
      "Access-Control-Allow-Origin": "*"
    },
    "/scripts/**": {
      "content-type": "text/javascript"
    }
  }
}

This can be useful for applying a content security policy, enforcing a different content-type, enabling cross-origin resource sharing (CORS), and more.

and this is what I have in my config file

{
  "name": "urbanetradio",
  "root": "www",
  "clean_urls": true,
  "error_page": "error.html",
  "headers": {
    "Access-Control-Allow-Origin": "*",
    "/js/**": {
      "content-type": "text/javascript"
    }
  }
}

but still I don't have any good result.


Solution

  • just in case someone wants to know, at time of doing the request you have to send more params, look at the example, I have it working now

    getBlogs: function($scope) {
      $scope.postsURL = 'http://urbanetradio.com/wp-json/posts?_jsonp=JSON_CALLBACK';
      $http.jsonp($scope.postsURL).success(function(data, status, headers, config) {
        console.log(config);
        $scope.posts = data;
      }).error(function(data, status_headers, config) {
          console.log('error');
      });
    }