With IE 11, when using [`vue-resource`](https://github.com/pagekit/vue-resource) for `POST`/`DELETE` requests without a `body`, the backend will throw a 400 error response from trying to parse `undefined` as JSON. Problem methods :x: - `GET` :heavy_check_mark: (N/A no `body`) - `POST` :x: - `PUT` :grey_question: - `PATCH` :grey_question: - `DELETE` :x: In Chrome, `XHR` seems to ignore `undefined` and not send it through to the `body`. In IE 11, it seems to pass it through. I think we have only had [1 report around this area](https://gitlab.com/gitlab-org/gitlab-ee/issues/1874) because there are so many criteria to be met: - Feature has to be using Vue and `vue-resource` - Request needs to be a `POST`/`DELETE` a request without a `body` - Person reproducing needs to be using IE 11 --- ### Problem areas in our current code Not comprehensive (just `Ctrl + f`: `resource.save`, `resource.delete`) - Issue show service [`deleteIssuable`](https://gitlab.com/gitlab-org/gitlab-ce/blob/6205e45727db4d6720b7c3dc6ce010872b4f1628/app/assets/javascripts/issue_show/services/index.js#L23) - MR widget service [`cancelAutomaticMerge`](https://gitlab.com/gitlab-org/gitlab-ce/blob/6205e45727db4d6720b7c3dc6ce010872b4f1628/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js#L23) - MR widget service [`removeWIP`](https://gitlab.com/gitlab-org/gitlab-ce/blob/6205e45727db4d6720b7c3dc6ce010872b4f1628/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js#L27) - MR widget service [`removeSourceBranch`](https://gitlab.com/gitlab-org/gitlab-ce/blob/6205e45727db4d6720b7c3dc6ce010872b4f1628/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js#L31) - MR widget service EE [`approveMergeRequest`](https://gitlab.com/gitlab-org/gitlab-ee/blob/4c37cf27d1750b05cc1497641358b1cb0546ef15/app/assets/javascripts/vue_merge_request_widget/ee/services/mr_widget_service.js#L19) - MR widget service EE [`unapproveMergeRequest`](https://gitlab.com/gitlab-org/gitlab-ee/blob/4c37cf27d1750b05cc1497641358b1cb0546ef15/app/assets/javascripts/vue_merge_request_widget/ee/services/mr_widget_service.js#L24) - MR widget service EE [`rebase`](https://gitlab.com/gitlab-org/gitlab-ee/blob/4c37cf27d1750b05cc1497641358b1cb0546ef15/app/assets/javascripts/vue_merge_request_widget/ee/services/mr_widget_service.js#L29) - *more if `PUT`, `PATCH` also have issues (needs to be tested)* --- ### Solutions #### Switch to `axios` This is the current strategy - [ ] `account` - [ ] `balsamiq_viewer` - [ ] `blob` - [x] `blob/notebook` - [x] `boards` - [ ] `common` - [ ] `common_vue` - [ ] `cycle_analytics` - [ ] `commit_pipelines` - [ ] `deploy_keys` - [ ] `docs` - [ ] `diff_notes` - [ ] `environments` - [ ] `environments_folder` - [ ] `filtered_search` - [ ] `graphs` - [ ] `graphs_charts` - [ ] `graphs_show` - [ ] `group` - [ ] `groups` - [ ] `groups_list` - [ ] `help` - [ ] `how_to_merge` - [x] `issue_show` - [ ] `integrations` - [ ] `job_details` - [ ] `locale` - [ ] `main` - [ ] `merge_conflicts` - [ ] `monitoring` - [ ] `network` - [ ] `notebook_viewer` - [ ] `notes` - [ ] `pdf_viewer` - [ ] `pipelines` - [ ] `pipelines_charts` - [ ] `pipelines_details` - [ ] `pipelines_times` - [ ] `profile` - [ ] `project_import_gl` - [ ] `project_new` - [ ] `prometheus_metrics` - [ ] `protected_branches` - [ ] `protected_tags` - [ ] `registry_list` - [ ] `ide` - [ ] `sidebar` - [ ] `schedule_form` - [ ] `schedules_index` - [ ] `snippet` - [ ] `sketch_viewer` - [ ] `stl_viewer` - [ ] `terminal` - [ ] `u2f` - [ ] `ui_development_kit` - [ ] `raven` - [x] `vue_merge_request_widget` - [ ] `test` - [ ] `two_factor_auth` - [ ] `users` - [ ] `performance_bar` - [ ] `webpack_runtime` #### Upgrade `vue-resource` This hasn't been scouted out but it is possible that the latest version has this fixed up or we could go fix it up :wink: #### Ignore `undefined` request body on the BE We could ignore `undefined` request body passed to the BE and not try to parse. #### Adding an interceptor Add an interceptor that changes the request to `Content-Type: text/plain` if there aren't any parameters passed in. Another sorta-workaround is passing `'{}'` as the `body` which works for a `POST` request but does not work in a `DELETE` request because [`vue-resource` translates all `body` arguments over to URL query `params`](https://github.com/pagekit/vue-resource/blob/676fb072661ebf45e0aa16a57ff413cc7eeea4aa/dist/vue-resource.common.js#L1485). #### Use `Content-Type: text/plain` Passing the `Content-Type: text/plain` header to `vue-resource` whenever making a request that doesn't have a `body` works because Rails doesn't try to parse the `body` as JSON. This **isn't** a very good solution because it requires knowledge of this pitfall and is manual process to be forgotten. ```js this.someResource.save({}, { headers: { 'Content-Type': 'text/plain', }, }) ``` We did this here as a hotfix for approvals, https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/2306 #### More ideas welcome :grinning: --- cc @brycepj @jschatz1 @filipa @iamphill @jneen @smcgivern