Reddit oAuth with AngularJS

Question

I can't seem to be able to get the access token from reddit. This is my code by I keep getting a [Error] XMLHttpRequest cannot load https://ssl.reddit.com/api/v1/access_token. Origin http://127.0.0.1:9000 is not allowed by Access-Control-Allow-Origin. (oauth, line 0)

Here is the relevant snippet of code:

var clientId = '############';
var cliendSecret = '##################';
var redirectUri = encodeURI('http://127.0.0.1:9000/oauth');
var grantType = 'authorization_code';

var getAccessToken = function (code) {
  var url = 'https://ssl.reddit.com/api/v1/access_token';

  var attrs = {
    'grant_type': grantType,
    'code': code,
    'redirect_uri': redirectUri
  };

  var encodedAuthHeader = 'Basic ' + btoa(clientId + ':' + cliendSecret);
  var promise = $http(
    {
      url: url,
      method: 'POST',
      data: attrs,
      headers: {'Authorization': encodedAuthHeader}
    }).then(function(response) {
      return response;
    }, function(response) {
      return response;
    });

  return promise;
};

I am able to get the access token using the postman plug-in on chrome, so I examined the request from postman and angular and they were vastly different (POST vs. OPTIONS). Any idea how I can create a similar request with Angular? I know that angular is making a CORS request first. Is this something that the reddit server doesn't support?

Thanks!

Postman:

  POST /api/v1/access_token HTTP/1.1
  Host: ssl.reddit.com
  Connection: keep-alive
  Content-Length: 403
  Cache-Control: no-cache
  User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36
  Origin: chrome-extension://fdmmgilgnpjigdojojpjoooidkmcomcm
  Authorization: Basic Vmd2dUNXT3RCb214d3c6YWh5d21kVXd4czJEXzhScThaNEhSU3ZzMG1F
  Content-Type: multipart/form-data; boundary=----WebKitFormBoundarytxCWa5t6OHsTtEU0
  Accept: */*
  Accept-Encoding: gzip,deflate,sdch
  Accept-Language: en-US,en;q=0.8
  Cookie: reddit_session=8647320%2C2014-02-05T14%3A38%3A09%2C668f4a063ccd2b118a7504c9849d9f0ec4595444

Angular:

  OPTIONS /api/v1/access_token HTTP/1.1
  Host: ssl.reddit.com
  Connection: keep-alive
  Access-Control-Request-Method: POST
  Origin: http://127.0.0.1:9000
  User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36
  Access-Control-Request-Headers: accept, authorization, content-type
  Accept: */*
  Referer: http://127.0.0.1:9000/oauth?state=test&code=40V-fHS-4r8COQgKUP08Q8dgzkk
  Accept-Encoding: gzip,deflate,sdch
  Accept-Language: en-US,en;q=0.8

To check if it's really just a CORS issue, you can temporarily disable the check by chrome as described in http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome — Pieter Herroelen, Apr 17 '14 at 15:32
@PieterHerroelen any idea how I can fix this without disabling security mode? How can I get angular to ignore the `Access-Control-Allow-Origin` header? — nknj, Apr 26 '14 at 20:36
@nknj Did you implement oauth successfully? Are you using a chrome extension? I'm trying to do something similar and would love to see some code if you have a working example. — Sean Glover, May 10 '14 at 16:42

score 2 · Answer 1 · edited May 23 '17 at 12:23

2

Have a look at my answer on this question for some background on CORS: Angular force disable CORS

In your case I think you should set the Content-Type header to multipart/form-data.

For all requests:

 $httpProvider.defaults.headers.post = {'Content-Type': 'multipart/form-data'}

For just one request:

 $http.post(url,data, {headers: {'Content-Type': 'multipart/form-data'}})

edited May 23 '17 at 12:23

Community

1
1

answered Apr 26 '14 at 20:58

Pieter Herroelen

5,977
2
29
37

Reddit oAuth with AngularJS

1 Answers1