1

I am trying to create a new node using drupal 8's restful API through Angular and I cannot seem to figure it out. My angular app has a domain of http://ang.dev:8888 and my drupal install has a domain of http://dang.dev:8888

When I make my request my D8 install returns 2 lines to the console:

OPTIONS http://dang.dev:8888/entity/node
XMLHttpRequest cannot load http://dang.dev:8888/entity/node. Response for preflight has invalid HTTP status code 415

My drupal 8 install is located at http://dang.dev:8888 and according to this page, /entity/node is where you can POST to create a new node.

My service for submitting the new article is below:

app.service('D8', function($http, Token) {
  var config = {
    headers: {
      'Content-Type': 'application/hal+json',
      'Authorization': 'Basic YWRtaW46YWRtaW4=',
      'X-CSRF-Token': ''
    },
    timeout: 20000
  };

  var token = Token.setToken().then(function(response) {
    config.headers['X-CSRF-Token'] = response.data;
    log(config.headers);
  });

  return {
    submitArticle: function(title, body) {
      var params = {
        type: [{'target_id': 'article'}],
        title: [{'value': title}],
        body: [{'value': body}]
      };
      return $http.post('http://dang.dev:8888/entity/node?_format=hal_json', params, config);
    }
  }
});

the X-CSRF-Token is already set by the time I make the request to submit an article.

EDIT

Enabled CORS via .htaccess on dang.dev so ang.dev can hit it:

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, PATCH, DELETE"
Header always set Access-Control-Allow-Headers: Authorization
Ronnie
  • 11,138
  • 21
  • 78
  • 140
  • OPTIONS (preflight) requests only occur when making cross domain request. They need to return CORS headers and 200 status. They are not payload requests and not controlled by javascript but by browser itself. Seems endpoint script isn't honoring them or isn't set up for CORS – charlietfl Jan 15 '16 at 19:58
  • Note that different port in most browsers constitutes cross domain – charlietfl Jan 15 '16 at 20:02
  • ok so my angular app is hosted at http://ang.dev:8888 and my drupal install is http://dang.dev:8888. I will look into setting up CORS on my install. I wanted to keep the database separate from the client facing web site which is why they're different domains. I've been trying to post a new article via PostMan and kept getting 403 and someone just told me that if you logout and try it it works which it does..so weird – Ronnie Jan 15 '16 at 20:06
  • BTw ...postman isn't subject to CORS restrictions the way browsers are. So it won't send OPTIONS – charlietfl Jan 15 '16 at 20:08
  • I setup cors on dang.dev by adding `Header always set Access-Control-Allow-Origin "*"` but still not luck – Ronnie Jan 15 '16 at 20:41
  • more to CORS than one header...need to honor OPTIONS and should actually allow actual origin ... see: http://stackoverflow.com/questions/8719276/cors-with-php-headers – charlietfl Jan 15 '16 at 20:44
  • check my edit, I just added those and tried and still receiving a 415 – Ronnie Jan 15 '16 at 20:46
  • so I moved my angular app to the same server as my drupal install and my angular code works fine. It submits an article. It has to be a server config thing that I just haven't figured out yet. I've setup CORS before, but not while using D8 – Ronnie Jan 15 '16 at 22:18

0 Answers0