Attempting to delete a request using FormData resulted in a 500 error response

Currently, I am working on deleting an attachment by sending a request with form data containing a URL through an API path along with an ID.

deleteAttachment(id, url) {
    const formData = new FormData();
    formData.append('url', url);
    const config = {
      headers: {
        'content-type': 'multipart/form-data',
      },
    };
    return Repository.delete(`${resource}/delete-file/${id}`, formData, config);
  },

I have verified that there are no issues with the ID and URL as I have console logged them and confirmed the correct values. To test, I used Postman with content-type set to json/application and encountered an error indicating that the request does not have multipart/form-data content-type. After changing the content-type to form-data by including key = url and value = url, the deletion was successful in Postman. However, the deleteAttachment() function is now returning an error:

xhr.js?b50d:172 DELETE https://anURLPath/api/employee/delete-file/38598 500

Access to XMLHttpRequest at 'https://anURLPath/api/employee/delete-file/38598' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I am unsure about what is causing this error. The same code works perfectly fine for posting APIs, but when it comes to deleting APIs, it encounters this issue. Can anyone provide assistance?

javascriptvue.jsaxiosmultipartform-datamultipart

Answer №1

To ensure proper functionality, it is important to include the DELETE method in the Access-Control-Allow-Methods header. While the POST and GET methods are typically included by default, you must explicitly add the DELETE method on the server side.

"Access-Control-Allow-Methods", "GET, POST, DELETE"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting a problem with dynamic routing in Vue Router

I am working on setting up the following routes: { path: '/', name: 'home', component: Home }, { path: '/:username', name: 'login', component: Login }, { path: '/dashboard', name: 'das ...

vue.jsvuejs2vue-router

AngularJS form submission with Ajax requiring a double click to successfully submit the form

I need to perform the following activities on my HTML page: User inputs email and password for registration Form is sent to Controller when user clicks Submit Controller uses AJAX to create JSON request to RESTful Server and receives response from server ...

javascriptjqueryhtmlangularjsajax

Generating dynamic dropdown menus using data from a database with the help of PHP and Ajax technologies

I'm currently working on creating a dynamic dropdown menu that will be populated with data retrieved from a database. I've hit a roadblock in parsing the data from a multidimensional array sent by a PHP file. Here's a snippet of my code: Se ...

javascriptphpajaxmultidimensional-array

An issue has arisen in the production environment on AWS EC2 due to a problem with Nodemailer

When using nodemailer with node.js to send emails, I have set up the following configuration: var transporter = nodemailer.createTransport({ service: 'gmail', host: 'smtp.gmail.com', auth: { ...

javascriptnode.jsexpressamazon-ec2nodemailer

What's causing the show/hide feature to malfunction within the for loop in Vue.js?

I've encountered an issue with my for loop where the show/hide functionality doesn't seem to work despite everything else functioning properly. I've been trying to troubleshoot this problem without success. <div id="app"> <ul> ...

javascriptvue.jsvuejs2

Different ways to rearrange the placement of Export buttons in a personalized div or outside the table using Datatable

I would like to display the export buttons outside of the table. While searching on stackoverflow, I came across an example that uses the Select options method. You can find the example here. If anyone knows how to achieve this, please modify it and shar ...

javascripthtmldatatables

Python automation with selenium - capturing webpage content

I am utilizing selenium to scrape multiple pages while refraining from using other frameworks such as scrapy due to the abundance of ajax action. My predicament lies in the fact that the content refreshes automatically nearly every second, especially finan ...

javascriptpythonselenium

Encountering Issues with Accessing Property

Upon trying to run my code, the console is displaying an error that I am unable to resolve. The error specifically states: "TypeError: Cannot read property 'author' of undefined." View the StackBlitz project here The error seems to be coming fr ...

javascriptangularrxjsangular-forms

transmitting an array from JavaScript to PHP

Struggling with passing an array from JavaScript to PHP for a school assignment. I'm still learning and can't seem to figure out what's missing. Any help would be greatly appreciated. This is the code I've tried: if(bets.length > ...

javascriptphpajax

What is the best way to create a summary module that consolidates and re-exports all the exported functionalities from multiple sub-modules in E

Is there a way to re-export the exports from multiple files in an ESM module without manually listing each export? I am looking to convert my CommonJS module directory, which contains several files, to ESM imports/exports. Currently, I have an index.js fi ...

javascriptnode.jsnode-moduleses6-modules

Refresh the HTML content within a specified div element

In my index.html, there is a graph (created using d3.js) along with some code that displays a stepper with a number of steps equal to the child nodes of the clicked node: <div ng-include="ctrl.numlab==2 && 'views/stepper-two-labs.htm ...

javascripthtmljqueryangularjs

Discovering the Essence of AngularJS Test Runner: Unraveling the

I recently started learning Angular JS and decided to follow the tutorial here. I've encountered a roadblock in step 8 where I need to write a test to check if the thumbnail images are being displayed. The concept behind it is simple. There is a JSON ...

javascriptangularjsangularjs-e2e

Enhancing nouislider jQuery slider with tick marks

I have integrated the noUIslider plugin () into one of my projects. I am seeking guidance on how to display tick marks below each value on the slider. This is the current initialization code for the slider: $slider.noUiSlider({ 'start': sta ...

javascriptjquerycssjquery-uinouislider

Using the Vue Class Component syntax in conjunction with TypeScript

I found an example on https://github.com/vuejs/vue-class-component that uses the new component syntax in vuejs3, but I'm trying to use TypeScript directly instead of babel. Here is what I attempted: <script lang="ts"> import Vue from "vue" impo ...

vue.jsvue-componentvuejs3

Implementing HTML page authentication with Identity ADFS URL through JavaScript

I have a basic HTML page that displays customer reports using a JavaScript function. The JavaScript makes an ajax call to retrieve the reports from a backend Spring REST API. In the Spring REST API, I have set up an endpoint "/api/saml" for authentication ...

javascripthtmljqueryjquery-pluginsadfs

What is the best way to connect to my shop through RTK-Query API?

Is there a way to access my redux-toolkit store data from within the rtk-query endpoints? How can I retrieve information from my store in the query or transformResponse methods? import { createApi } from '@reduxjs/toolkit/query/react' import cus ...

javascriptreactjsnext.jsredux-toolkitrtk-query

Windows location does not change after an XMLHttpRequest is made

Here is my code that uses XMLHttpRequest: function SignUp() { signUpConnection = new XMLHttpRequest(); signUpConnection.onreadystatechange = processRegistration; signUpConnection.open('GET', 'index.php?registrarse=&username= ...

javascriptajaxxmlhttprequest

What could be causing my v-data-table to not populate with vuex data?

I am facing an issue with a component that contains a Vuetify datatable. The datatable is connected to my Vuex store, and when the component loads, it should populate the table with data. Although I can see the data being fetched and stored correctly, the ...

vue.jsvuejs2vuex

Exploring the world of handling GET and POST parameters in Node.js with

As someone who is new to Node/Express, I've noticed that GET parameters can be captured using the following syntax: app.get('/log/:name', api.logfunc); For POST requests, it can be done like this: app.post('/log', ... (with for ...

javascriptnode.jsexpress

Combining Mocha, BlanketJS, and RequireJS has resulted in the error message "No method 'reporter'."

While using Mocha with RequireJS, my tests are running smoothly. However, I encountered an issue when trying to incorporate blanket code coverage. The error Uncaught TypeError: Object #<HTMLDivElement> has no method 'reporter' keeps popping ...

javascriptrequirejscode-coveragemocha.jsblanket.js