0

I've written an angular app that is part of a rails app. The idea is that a third party web site can create a script tag in their page pointing to my rails method where they want my app to show up.

In my rails controller I have logic that returns raw javascript like below...

def job_board
    div_init_script =
          "var jobBoardDiv=document.getElementById('#{div_id}');" \
          "jobBoardNgView=document.createElement('ng-view');" \
          'jobBoardDiv.appendChild(jobBoardNgView);' \
          "jobBoardDiv.setAttribute('ng-app','jobBoard');"

    url = Rails.application.config.api_url

    contents = Rails.cache.fetch 'api_js' do
      file_contents = File.read("#{Rails.root}/public/app/app.js")
      "(function(){ var hookApiUrl = {  apiUrl: '#{url}'};#{file_contents}})();"
    end

    send_data div_init_script + contents, type: 'text/javascript', disposition: 'inline'
end

So, to recap, my site returns raw javascript executing within another site and my javascript gets/posts to my site's api endpoints.

I came across this gist to get CORS working - https://gist.github.com/dhoelzgen/cd7126b8652229d32eb4 - and when I run it all locally within the rails server, all of the headers are being added to every request.

However CORS won't work when I set up the scenerio of running a page on my localhost that has a script src set to my site's job_board endpoint. From what I've read, angular adds a preflight check to the $http.get and post methods which the preflight check portion of the code from the gist linked above "should" handle. But when I look at the console when running my app, I don't see any preflight check on the calls that are failing. Just a single call with no access-control headers added. I'm not sure where else to go at this point. Can anyone make any suggestions? Thanks.

geoff swartz
  • 5,437
  • 11
  • 51
  • 75
  • The pre-flight check isn't done by Angular. If you use Fiddler you will see an OPTIONS call - your server needs to handle this properly – Lee Willis Apr 10 '15 at 13:07
  • Maybe some of the answers on here will be of some use: http://stackoverflow.com/questions/24134117/no-access-control-allow-origin-header-is-present-on-the-requested-resource-an/24137530#24137530 – Lee Willis Apr 10 '15 at 13:08
  • I think I'm getting closer to the problem but not so much a solution yet. When the initial script call is made, it saves a cookie to the client. Angular has $httpProvider.defaults.withCredentials = true; to handle cookies on requests. But then if credentials is true, my origin can't be '*'. – geoff swartz Apr 10 '15 at 18:49

1 Answers1

0

If it's a preflight check, it should be trying to run an "OPTIONS" method. Is that what the chrome debugger is telling you?

Using the chrome debugger network tab, look at the REQUEST and RESPONSE headers. That should give you a better idea what's happening/failing.

EDIT Your server isn't responding with the proper CORS headers.

At the very least, you need your server to respond with "Access-Control-Allow-Origin" and "Access-Control-Allow-Methods" in your header. Ex:

"Access-Control-Allow-Origin" value="http://yourclienturi.com"
"Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, HEAD, OPTIONS"
"Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept"
vidalsasoon
  • 4,365
  • 1
  • 32
  • 40
  • No, I'm not seeing any OPTIONS method used in the chrome debugger. Here's a screenshot of what I'm seeing - http://i.imgur.com/TonzUiK.jpg – geoff swartz Apr 10 '15 at 15:00
  • add some info that might help you – vidalsasoon Apr 10 '15 at 15:09
  • Yes that's my whole problem. I'm trying to figure out why. It's supposed to add those headers on all actions and it does when I run it locally. But on our dev server, it only adds it to some. So I'm not sure why they're not there when I'm referencing our dev server. – geoff swartz Apr 10 '15 at 15:29