The requested URL cannot be loaded due to the Access-Control-Allow-Methods in the preflight response not allowing the PUT method

When making an Ajax request using AngularJS, I encountered a problem with the $http method. It works well with both get and post requests, but throws an error with put.

Response Header :

Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Accept, Accept-Encoding, Accept-Language, Host, Referer, User-Agent, X-API-KEY
Access-Control-Allow-Methods:OPTIONS
Access-Control-Allow-Origin:*
Access-Control-Max-Age:1728000
Content-Length:0
Date:Mon, 25 Jan 2016 08:44:05 GMT
Server:spray-can/1.3.2

Request Header :

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8,hi;q=0.6
Access-Control-Request-Headers:accept, content-type, x-api-key
Access-Control-Request-Method:PUT
Connection:keep-alive
Host:localhost:8080
Origin:http://localhost:8000
Referer:http://localhost:8000/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.111 Safari/537.36

Answer №1

To configure the necessary headers, include the following code:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, Content-Type, Authorization, X-Auth-Token');
header('Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS');

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

Material UI Reactjs implementing a dynamic date picker

I've encountered an issue with the datepicker where I am unable to select specific dates. I have a state containing an array of date strings and I need to configure the datepicker to only allow selection of these specific dates. Can someone please adv ...

Displaying fresh data from a JSON URL by clicking on a button and dynamically refreshing the view in

Apologies if this question has been asked before, but I couldn't locate it. I’m currently engaged in an Angular project where I’ve loaded an external JSON file using http. The data is presented through ngRepeat. When a button is clicked, I aim t ...

Discovering the ways to retrieve Axios response within a SweetAlert2 confirmation dialog

I'm struggling to grasp promises completely even after reviewing https://gist.github.com/domenic/3889970. I am trying to retrieve the response from axios within a sweetalert confirmation dialog result. Here is my current code: axios .post("/post ...

Struggling to include the VividCortex angular-recaptcha dependency in the AngularJS module due to an

Struggling to integrate Google reCaptcha v2 into my AngularJS app. I attempted to utilize VividCortex's angular-recaptcha, but incorporating the dependency into my app module proved challenging. The current code within my module looks something like ...

Safari IOS experiencing issue with element disappearing unexpectedly when input is focused

I am facing a situation similar to the one discussed in the question (iOS 8.3 fixed HTML element disappears on input focus), but my problem differs slightly. My chatbox iframe is embedded within a scrollable parent, and when the iframe is activated, it exp ...

Using Conditions in a Javascript For Loop

I would like to utilize a for loop to achieve the following task. Within an array, I have a predefined set of values representing hex colors for a chart. My goal is to extract a specified number of those values using the loop with two options. If the ...

acquiring the main class instance within a function without relying on an arrow function

Within my Angular project, I have integrated a datatable with row grouping and row callbacks. Datatable Options openPositionDatatableOptions = { sDom: 'rt<"bottom"p>', ajax: (data, callback, settings) => { this.service.ge ...

Filling in form fields with data from the database based on the option selected from the dropdown menu

I'm trying to create a dynamic form where selecting a name from a drop-down menu will automatically populate the rest of the fields with that person's information without refreshing the page. I believe I need to use an onChange function in JavaSc ...

Updating data scope in AngularJS using $http request not functioning properly

I am facing an issue where the $scope.user_free_status is not updating when I set a user free, but works perfectly fine when I unset the parameter. It's strange that I need to reload the page in one case and not the other. The data fetched is stored i ...

Prevent horizontal swiping in an angular bootstrap carousel

How can I deactivate the ng-swipe-right and ng-swipe-left functionalities for an Angular Bootstrap carousel? I attempted the following approach: Once the carousel is loaded: $timeout(function() { angular.element('.carousel').attr('ng-swip ...

jqgrid now features inline editing, which allows for the posting of only the data that

My jqGrid includes editable columns, and I am looking for a way to only post the data of columns where changes have been made. Here is an example of my colModel: colModel: [{ name: 'I_PK', index: 'u.I_PK ...

Obtaining a JSON reply using Ember

Exploring new possibilities with Ember js, I am eager to switch from fixtures to using an API. Below is the code I have implemented to fetch the data: App.ItemsRoute = Ember.Route.extend({ model: function() { return $.getJSON('http://som ...

Jest snapshot tests using react-test-renderer encounter null references in refs

Having an issue with manually initializing the Quill editor in componentDidMount and encountering Jest test failures. It seems that the ref value I am receiving is null in jsdom. There is a related issue here: https://github.com/facebook/react/issues/7371, ...

There was a glitch encountered while constructing (Verifying type validity) with Prisma

There was an issue in the node_modules/@prisma/client/runtime/library.d.ts file on line 1161, specifically error TS1005 where a '?' was expected. 1161 | select: infer S extends object; | ^ 1162 | } & R ...

Why is req.user returning as undefined when using Express and Passport?

After setting up my app to redirect to "/", I encountered an issue where req.user is undefined. However, in the twitter callback, req.user provides me with the necessary data. It seems that I lose the data on the redirection. Even though there is ...

Copy password input field content in Vue to clipboard

I'm currently working on a Vue app that includes a form input for creating passwords. I've managed to implement a button that shows/hides the password, but I'm struggling with adding a copy to clipboard function. It doesn't seem to be w ...

Collaborative gaming experience with three.js and socket.io

I created a basic scene in three.js that I find really fun to interact with. However, I wanted to enhance it by adding multiplayer functionality through a socket.io server. To achieve this, I prompt the user for their username: var username = prompt("what ...

Only Chrome causing my JavaScript execution to freeze due to Ajax

When using Ajax, it is supposed to be asynchronous, but for some reason, it seems like it's either stopping or pausing my JavaScript execution and only resuming once the response is received. Here is an example of HTML value: <input value="foo" d ...

Top method for generating intricate HTML elements sent by the server in real-time

When a Mouse click event occurs, I want to populate a <div> with a form. I have set up the jQuery to send a request to the server and receive the form as plain text. My question is: if I use the innerHTML method to add the form to the <div>, w ...

How can the total price for a shopping cart be computed in React/Redux?

After extensive searches on Google and SO, I'm still coming up empty-handed when it comes to calculating the total price of items in a cart. Many tutorials stop at basic cart functionalities like "Add item to cart" or "increase/decrease quantity", but ...