-
Couldn't load subscription status.
- Fork 380
Use fetch instead of $.ajax #73
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
client/package.json
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just curious. what for?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks odd.
npm i --save imports-loader
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks like imports-loader was shrinkwraped.
npm uninstall -S imports-loader
# remove `npm-shrinkwrap.json`
npm i -S imports-loader
npm shrinkwrapThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
@mapreal19 @alexfedoseev @samnang Let's make a call on if we should with fetch or maybe axios. We could put fetch in for now, as an example of it.
I feel if the fetch suppose to be standard in the future, then we should we use it. I love its simplicity of axios.
@alexfedoseev @mapreal19 What's your opinion? @samnang Not sure which one you're voting for. I'm pretty sure that axios would use fetch underneath. My vote is for a layer of abstraction on top of fetch.
I don't see necessity of using both libs, they are doing the same thing in the end. And because of this I have no special preference over any of two modules.
// actionCreator.js import 'apiCall' from 'myLibs/apiCall'; apiCall(params).then(/* ... */); // myLibs/apiCall.js (layer of abstraction) export default params => { // do smth with params... // I don't think that it's a big difference what will be used here return fetch/axios(modifiedParams); }
Totally agree with @alexfedoseev 👍
Unless we want to do something that other one will do it easier.
I say use use axios and one apiCall.js method. The only reason I'd say, is because the webpack integration with fetch is really funky.
Looks like fetch can be exposed by adding it to entry array in webpack config:
entry: ['whatwg-fetch', './assets/javascripts/App'], // now it should be available as `fetch` without `webpack.ProvidePlugin` craziness
@mapreal19 Can you try this one?
@alexfedoseev I'll give it a try. Also I'd prefer a layer of abstraction
@alexfedoseev Seems to be working. Thanks! 👍
Can you check in Safari? Chrome & Firefox both supports fetch natively.
Yep I checked it there and worked fine.
👍
OK -- this looks good -- I'm going to test this out as well, but since both @alexfedoseev and @mapreal19 confirmed, I did the simple merge to master. Great job!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@alexfedoseev @mapreal19 I'm pretty sure some of these dependencies are not needed for the rails deployment. It would be good to see see if the hot only dependencies were moved to devDependencies.
The problem with the build is copied here:
1) Add new comment Horizonal Form behaves like Form submits form
Failure/Error: visit root_path
Capybara::Poltergeist::JavascriptError:
One or more errors were raised in the Javascript code on the page. If you don't care about these errors, you can ignore them by setting js_errors: false in your Poltergeist configuration (see documentation for details).
Error: Cannot find module "whatwg-fetch"
Error: Cannot find module "whatwg-fetch"
at http://127.0.0.1:49150/assets/application.js:14672 in webpackMissingModule
at http://127.0.0.1:49150/assets/application.js:14672
at http://127.0.0.1:49150/assets/application.js:14645 in __webpack_require__
at http://127.0.0.1:49150/assets/application.js:14665
at http://127.0.0.1:49150/assets/application.js:16345
Shared Example Group: "Form" called from ./spec/features/comments_spec.rb:36
# /home/rof/cache/bundler/ruby/2.2.0/gems/poltergeist-1.6.0/lib/capybara/poltergeist/browser.rb:323:in `command'
# /home/rof/cache/bundler/ruby/2.2.0/gems/poltergeist-1.6.0/lib/capybara/poltergeist/browser.rb:31:in `visit'
# /home/rof/cache/bundler/ruby/2.2.0/gems/poltergeist-1.6.0/lib/capybara/poltergeist/driver.rb:95:in `visit'
# /home/rof/cache/bundler/ruby/2.2.0/gems/capybara-2.4.4/lib/capybara/session.rb:227:in `visit'
# /home/rof/cache/bundler/ruby/2.2.0/gems/capybara-2.4.4/lib/capybara/dsl.rb:51:in `block (2 levels) in <module:DSL>'
# ./spec/features/comments_spec.rb:28:in `block (2 levels) in <top (required)>'
# ./spec/rails_helper.rb:43:in `block (3 levels) in <top (required)>'
# /home/rof/cache/bundler/ruby/2.2.0/gems/database_cleaner-1.4.1/lib/database_cleaner/generic/base.rb:15:in `cleaning'
# /home/rof/cache/bundler/ruby/2.2.0/gems/database_cleaner-1.4.1/lib/database_cleaner/base.rb:92:in `cleaning'
# /home/rof/cache/bundler/ruby/2.2.0/gems/database_cleaner-1.4.1/lib/database_cleaner/configuration.rb:86:in `block (2 levels) in cleaning'
# /home/rof/cache/bundler/ruby/2.2.0/gems/database_cleaner-1.4.1/lib/database_cleaner/configuration.rb:87:in `call'
# /home/rof/cache/bundler/ruby/2.2.0/gems/database_cleaner-1.4.1/lib/database_cleaner/configuration.rb:87:in `cleaning'
# ./spec/rails_helper.rb:42:in `block (2 levels) in <top (required)>'
CC: @dylangrafmyre
We just need to follow the README instructions when adding new node modules and remember to npm shrinkwrap. I have fixed this twice today.
react-webpack-rails-tutorial_client_at_master_ _shakacode_react-webpack-rails-tutorial
very nice Dylan!
I'm glad I wrote down what to do, or else I'd forget!
The good news is that with NPM 3, shrinkwrap.json will be automatically updated when you npm install a new module. Similar to gemfile and gemfile.lock
I'm going to to roll back the heroku build.
We need to handle what jquery_ujs does for the crsf:
2015年09月05日T07:44:47.616230+00:00 app[web.1]: Started POST "/comments.json" for 66.8.170.211 at 2015年09月05日 07:44:47 +0000
2015年09月05日T07:44:47.619676+00:00 app[web.1]: Completed 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0ms)
2015年09月05日T07:44:47.769668+00:00 app[web.1]: Processing by CommentsController#index as JSON
2015年09月05日T07:44:47.783726+00:00 app[web.1]: Rendered comments/index.json.jbuilder (12.9ms)
2015年09月05日T07:44:47.618866+00:00 app[web.1]: Processing by CommentsController#create as JSON
2015年09月05日T07:44:47.618946+00:00 app[web.1]: Parameters: {"comment"=>{"author"=>"Justin Gordon", "text"=>"Anybody want to to try this one and get some free coaching in coding:\nhttps://github.com/shakacode/react-webpack-rails-tutorial/issues/77"}}
2015年09月05日T07:44:47.619235+00:00 app[web.1]: Can't verify CSRF token authenticity
2015年09月05日T07:44:47.621620+00:00 app[web.1]:
2015年09月05日T07:44:47.621623+00:00 app[web.1]: ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken):
2015年09月05日T07:44:47.621626+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_controller/metal/request_forgery_protection.rb:181:in `handle_unverified_request'
2015年09月05日T07:44:47.621627+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_controller/metal/request_forgery_protection.rb:209:in `handle_unverified_request'
2015年09月05日T07:44:47.621629+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_controller/metal/request_forgery_protection.rb:204:in `verify_authenticity_token'
2015年09月05日T07:44:47.621631+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/activesupport-4.2.3/lib/active_support/callbacks.rb:430:in `block in make_lambda'
2015年09月05日T07:44:47.621632+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/activesupport-4.2.3/lib/active_support/callbacks.rb:162:in `call'
2015年09月05日T07:44:47.621634+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/activesupport-4.2.3/lib/active_support/callbacks.rb:162:in `block in halting'
2015年09月05日T07:44:47.621635+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/activesupport-4.2.3/lib/active_support/callbacks.rb:502:in `call'
2015年09月05日T07:44:47.621637+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/activesupport-4.2.3/lib/active_support/callbacks.rb:502:in `block in call'
2015年09月05日T07:44:47.621638+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/activesupport-4.2.3/lib/active_support/callbacks.rb:502:in `each'
2015年09月05日T07:44:47.621640+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/activesupport-4.2.3/lib/active_support/callbacks.rb:502:in `call'
2015年09月05日T07:44:47.621641+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/activesupport-4.2.3/lib/active_support/callbacks.rb:88:in `run_callbacks'
2015年09月05日T07:44:47.621642+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/abstract_controller/callbacks.rb:19:in `process_action'
2015年09月05日T07:44:47.621643+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_controller/metal/rescue.rb:29:in `process_action'
2015年09月05日T07:44:47.621647+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_controller/metal/instrumentation.rb:32:in `block in process_action'
2015年09月05日T07:44:47.621648+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/activesupport-4.2.3/lib/active_support/notifications.rb:164:in `block in instrument'
2015年09月05日T07:44:47.621650+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/activesupport-4.2.3/lib/active_support/notifications/instrumenter.rb:20:in `instrument'
2015年09月05日T07:44:47.621651+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/activesupport-4.2.3/lib/active_support/notifications.rb:164:in `instrument'
2015年09月05日T07:44:47.621652+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_controller/metal/instrumentation.rb:30:in `process_action'
2015年09月05日T07:44:47.621654+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_controller/metal/params_wrapper.rb:250:in `process_action'
2015年09月05日T07:44:47.621655+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/activerecord-4.2.3/lib/active_record/railties/controller_runtime.rb:18:in `process_action'
2015年09月05日T07:44:47.621656+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/abstract_controller/base.rb:137:in `process'
2015年09月05日T07:44:47.621658+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionview-4.2.3/lib/action_view/rendering.rb:30:in `process'
2015年09月05日T07:44:47.621659+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_controller/metal.rb:196:in `dispatch'
2015年09月05日T07:44:47.621660+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_controller/metal/rack_delegation.rb:13:in `dispatch'
2015年09月05日T07:44:47.621661+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_controller/metal.rb:237:in `block in action'
2015年09月05日T07:44:47.621662+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/routing/route_set.rb:76:in `call'
2015年09月05日T07:44:47.621663+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/routing/route_set.rb:76:in `dispatch'
2015年09月05日T07:44:47.621665+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/routing/route_set.rb:45:in `serve'
2015年09月05日T07:44:47.621666+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/journey/router.rb:43:in `block in serve'
2015年09月05日T07:44:47.621667+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/journey/router.rb:30:in `each'
2015年09月05日T07:44:47.621668+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/journey/router.rb:30:in `serve'
2015年09月05日T07:44:47.621670+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/routing/route_set.rb:821:in `call'
2015年09月05日T07:44:47.621671+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/rack-1.6.4/lib/rack/etag.rb:24:in `call'
2015年09月05日T07:44:47.621673+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/rack-1.6.4/lib/rack/conditionalget.rb:38:in `call'
2015年09月05日T07:44:47.621674+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/rack-1.6.4/lib/rack/head.rb:13:in `call'
2015年09月05日T07:44:47.621675+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/middleware/params_parser.rb:27:in `call'
2015年09月05日T07:44:47.621677+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/middleware/flash.rb:260:in `call'
2015年09月05日T07:44:47.621683+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/rack-1.6.4/lib/rack/session/abstract/id.rb:225:in `context'
2015年09月05日T07:44:47.621685+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/rack-1.6.4/lib/rack/session/abstract/id.rb:220:in `call'
2015年09月05日T07:44:47.621688+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/middleware/cookies.rb:560:in `call'
2015年09月05日T07:44:47.621689+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/activerecord-4.2.3/lib/active_record/query_cache.rb:36:in `call'
2015年09月05日T07:44:47.621691+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/activerecord-4.2.3/lib/active_record/connection_adapters/abstract/connection_pool.rb:653:in `call'
2015年09月05日T07:44:47.621692+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/middleware/callbacks.rb:29:in `block in call'
2015年09月05日T07:44:47.621694+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/activesupport-4.2.3/lib/active_support/callbacks.rb:84:in `run_callbacks'
2015年09月05日T07:44:47.621695+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/middleware/callbacks.rb:27:in `call'
2015年09月05日T07:44:47.621696+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/middleware/remote_ip.rb:78:in `call'
2015年09月05日T07:44:47.621698+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/middleware/debug_exceptions.rb:17:in `call'
2015年09月05日T07:44:47.621699+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'
2015年09月05日T07:44:47.621700+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/railties-4.2.3/lib/rails/rack/logger.rb:38:in `call_app'
2015年09月05日T07:44:47.621702+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/railties-4.2.3/lib/rails/rack/logger.rb:20:in `block in call'
2015年09月05日T07:44:47.621703+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/activesupport-4.2.3/lib/active_support/tagged_logging.rb:68:in `block in tagged'
2015年09月05日T07:44:47.621706+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/activesupport-4.2.3/lib/active_support/tagged_logging.rb:26:in `tagged'
2015年09月05日T07:44:47.621708+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/activesupport-4.2.3/lib/active_support/tagged_logging.rb:68:in `tagged'
2015年09月05日T07:44:47.621709+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/railties-4.2.3/lib/rails/rack/logger.rb:20:in `call'
2015年09月05日T07:44:47.621711+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/middleware/request_id.rb:21:in `call'
2015年09月05日T07:44:47.621712+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/rack-1.6.4/lib/rack/methodoverride.rb:22:in `call'
2015年09月05日T07:44:47.621713+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/rack-1.6.4/lib/rack/runtime.rb:18:in `call'
2015年09月05日T07:44:47.621715+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/activesupport-4.2.3/lib/active_support/cache/strategy/local_cache_middleware.rb:28:in `call'
2015年09月05日T07:44:47.621716+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/middleware/static.rb:116:in `call'
2015年09月05日T07:44:47.621717+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/rack-1.6.4/lib/rack/sendfile.rb:113:in `call'
2015年09月05日T07:44:47.621718+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/railties-4.2.3/lib/rails/engine.rb:518:in `call'
2015年09月05日T07:44:47.621720+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/railties-4.2.3/lib/rails/application.rb:165:in `call'
2015年09月05日T07:44:47.621721+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/unicorn-4.9.0/lib/unicorn/http_server.rb:580:in `process_client'
2015年09月05日T07:44:47.621722+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/unicorn-4.9.0/lib/unicorn/http_server.rb:674:in `worker_loop'
2015年09月05日T07:44:47.621723+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/unicorn-4.9.0/lib/unicorn/http_server.rb:529:in `spawn_missing_workers'
2015年09月05日T07:44:47.621725+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/unicorn-4.9.0/lib/unicorn/http_server.rb:140:in `start'
2015年09月05日T07:44:47.621726+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/gems/unicorn-4.9.0/bin/unicorn:126:in `<top (required)>'
2015年09月05日T07:44:47.621727+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/bin/unicorn:23:in `load'
2015年09月05日T07:44:47.621728+00:00 app[web.1]: vendor/bundle/ruby/2.2.0/bin/unicorn:23:in `<main>'
@mapreal19 @alexfedoseev Let's get the CRSF part in and then resubmit the PR.
@justin808 I think it should be fixed in #79
Null session it's the default value http://api.rubyonrails.org/classes/ActionController/RequestForgeryProtection/ClassMethods.html
See: http://guides.rubyonrails.org/security.html#cross-site-request-forgery-csrf and https://github.com/rails/jquery-ujs/blob/master/src/rails.js#L60
@alexfedoseev @mapreal19 If we can't do something as seamless as jquery-ujs, then maybe the current solution is really the best with Rails? I fixed the Promise issue by wrapping the jquery deferred.
Perhaps we could create a small npm library, possibly with the react_on_rails gem, to make this just as easy.
@mapreal19 Given the documentation at http://guides.rubyonrails.org/security.html#cross-site-request-forgery-csrf, do you still believe that a null session is appropriate for the general case?
@dylangrafmyre @samnang What's your opinion of the CSRF issue with respect to switching from jquery-ujs?
We need to include csrf_param & csrf_token in headers of request. It looks like this: apiCall middleware -> inside middleware getting those from the DOM (or somehow) and include them in headers -> fetch().
Looks like jquery-ujs is doing pretty much the same: https://github.com/rails/jquery-ujs/blob/master/src/rails.js#L60
@justin808 I believe in this case it would be. Rails is acting as an API, and that's null_option stands for.
From what I read It isn't disabling CSRF protection, it's another method of protection.
Also here:
An API pretty much precludes CSRF, because its entire purpose is generally to allow 3rd-party entities ->to access and manipulate data on your site (the "cross-site" in CSRF)
It that's not the case, maybe the token should live in the store @alexfedoseev ?
Either we have to have render from rails layout view template csrf_meta_tags or we could setup like people done to make rails work with angular https://github.com/jsanders/angular_rails_csrf/blob/6b19e328ffd4da6cf9dcfb1f6698a74428ea43aa/lib/angular_rails_csrf/concern.rb#L10
Then in React, we will need somehow to read that value from either option above and assign it to request header X-CSRF-Token.
@justin808 @alexfedoseev @mapreal19
We can read this from the header of the document. But it's not something justified by putting as some extra code for the call to fetch. The standard way in rails is to use $.ajax, and you just don't have to think. The only reason that this is not great is that the deferred is not a Promise. So this is more of a stylistic discussion, than "can we do it" discussion. The solution if we want to go this way is clearly to improve the react_on_rails gem.
@skv-headless @josiasds Any opinions?
I believe in this case it would be. Rails is acting as an API, and that's null_option stands for.
Until we are using cookie-based authentication, we are not well-baked API. And since Rails in this case is not API-only application, I'd prefer to keep CSRF protection with csrf token.
The standard way in rails is to use $.ajax, and you just don't have to think
I think it's kinda monkey patching: https://github.com/rails/jquery-ujs/blob/master/src/rails.js#L93
It's similar to if we will expose globally "our" fetch method (it's apiCall middleware actually), and inside "our" fetch method we will import native fetch, where we will add header with csrf token (taken from the DOM or cookie).
This is where the token is being added: https://github.com/rails/jquery-ujs/blob/master/src/rails.js#L210
Looks like if we will submit form not with remote: true option, but by simple $.ajaxwith json body, then we'll get same error as with fetch, because we need to provide csrf_token in params (that's what jquery_ujs does) or in header X-CSRF-Token of request.
/cc: @justin808 @samnang @mapreal19
@alexfedoseev I'm quite sure that just using $.ajax that the inclusion of the rails_ujs library monkey patches jquery to include the token. The remote option is for rails controls.
@justin808 You're right, this magic is here (:
So this is the case:
It's similar to if we will expose globally "our"
fetchmethod (it'sapiCallmiddleware actually), and inside "our"fetchmethod we will import nativefetch, where we will add header with csrf token (taken from the DOM or cookie).
So basically it's kinda fetch-rails, but I'm not sure it's worth it, since it's just a thin wrapper around native fetch, so I'd go with simple apiCall helper, which can be easily customized on per-project basis.
I found this way to make it work: https://gist.github.com/mapreal19/338356e2e7a3140c45bb
But as I've discussed with @justin808 this is adding more complexity to a problem already solved.
cc @alexfedoseev @samnang
@mapreal19 This should be abstracted out into reusable helper, since it's a common addition to every request.
So, how we're gonna solve this? Save token to cookie or get it from the DOM in apiCall helper?
/cc: @justin808 @samnang @mapreal19
@alexfedoseev I say we fit something into the react_on_rails gem so it's seamless. Maybe some new method like rails_fetch that wraps the native fetch and includes the csrf tokens.
Or we use the jquery_ujs one, and wrap the deferred into a Promise.
fetchinstead ofajaxfor HTTP requests #69