Does the Cors problem happen exclusively during a "put" request?

I am currently developing an Angular application that utilizes ng-resource. The backend service API is created using Asp.Net Core web api and CORS has been enabled.

Here is the code snippet for service.js:

.factory('D2Service', ['$resource', function ($resource) {
    return $resource('http://localHost:5001/api/D2/:id',
        { id: '@id' },
        {
            update: { method: 'PUT' }
        });
}])

Despite this, when making the call D2Service.update(model.d); in the controller, I encountered the following error:

XMLHttpRequest cannot load http://localhost:5001/api/D2. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8082' is therefore not allowed access.

Strangely,

D2Service.get({ id: model.id })....
executes without any issues. Why does the 'PUT' method encounter a CORS problem while the 'GET' method works fine?

Below are the details of the request/response as monitored using Fiddler.

Request:

OPTIONS http://localhost:5001/api/D2 HTTP/1.1
Host: localhost:5001
Connection: keep-alive
Access-Control-Request-Method: PUT
Origin: http://localhost:8082
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Referer: http://localhost:8082/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8

Response:

HTTP/1.1 204 No Content
Date: Sun, 27 Nov 2016 23:32:31 GMT
Server: Kestrel

Answer №1

In order for the preflight request to function properly, make sure to include the following headers in your response:

Access-Control-Allow-Origin: YOUR_DOMAIN
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: YOUR_CUSTOM_HEADERS

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

The D3js visualization is failing to display properly for the user, with the D3 source code residing on the server

I have encountered an issue after transferring my D3js chart generation system from a development server with no problems to a live Windows 2008 r2 server. On the live server, only the background SVG element is displayed and none of the other elements like ...

What steps should I take to troubleshoot the issue when utilizing full HTML link paths in my links?

I have come across the recommendation to use full link paths between pages on my website for various reasons. However, I am concerned about how to debug and work on my local testing environment when all of the links are using full paths. (Manually replaci ...

The interconnected web of relationships between AngularJS components

Can the hierarchy of components in AngularJS be grasped and their relationships with each other understood? Are there any visual aids available for a clearer understanding of this concept? ...

How come the splice method is changing the value of the original object?

There's something strange happening with this code I'm trying out. Code: const x = [{ a: 'alpha', b: 'beta' }, { a: 'gamma' }]; const y = x[0]; y.a = 'delta'; x.splice(1, 0, y) console.log(x) Output: [ ...

Reducing file size through compression (gzip) on express js version 4.4.1

My express js app is functioning as a web server, but I am having trouble with serving unzipped static content (js and css files). I have tried using compression from https://github.com/expressjs/compression, but it doesn't seem to be working for me. ...

Using JQuery's change function with a Button Group is a great way

I encountered an issue where my button group works with the on.click function but not with on.change. <div class="ui buttons"> <button class="ui button">Value 1</button> <button class="ui bu ...

Tips for compressing css styles with webpack version 3

My goal is to optimize and minify my CSS for production, but I'm encountering errors with my current implementation. Here's a snippet of my webpack 3 configuration in config.production.js: var webpack = require("webpack"); var path = require("pa ...

Making sure the axios API call is completed before rendering the child component with props

Check out the snippet of code I've provided: function StoryCarousel(props) { const [ivrDests, setIVRDests] = useState([]); useEffect(() => { async function getIVRDests() { var data = { "customer-id": ...

Step-by-step guide on programmatically closing the Material-UI DropDownMenu

http://www.material-ui.com/#/components/dropdown-menu Having encountered a styling issue, I was compelled to rearrange the order of components within my material-ui DropdownMenu. Nevertheless, some buttons (renderNavLink) are now failing to close the Dro ...

Steps for integrating a controller with ui-router in AngularJS:

Seeking assistance with setting up ui-router in AngularJS for the first time. I suspect my script.js file may be incorrect. Any guidance would be greatly appreciated. Could the issue be related to the app.controller? Where did I make a mistake? var app = ...

Issue with Proper Display of JSON Unicode Characters in AngularJS

When I receive this JSON array, I am using Angular to display it. Here is a shortened example: $scope.results = [{"description": "\u003ca href=\"http://google.com \" target=\"_blank\"\u003eClick Here\u003c/a&bs ...

Steps to turn off sourcemaps in the @sentry/nextjs package

Currently, I am working on a Next.js project and have incorporated the @sentry/nextjs package for error logging purposes. My goal is to turn off sourcemaps in the client side of my deployed application. Despite going through this informative blog post fro ...

Alter the hues of the triangles on a threeJS plane

Is there a way to create a multicolor plane by changing the colors of the triangles within a mesh? Can the colors of triangles be adjusted in a PlaneGeometry object? ...

Is there a way to restrict my input to only 10 numbers without allowing any characters?

Is there a way to restrict the phone number input to only allow 10 numbers and exclude any other characters? Currently, setting the maxLength attribute limits the characters to 10 but allows additional characters as well. If I change the type attribute to ...

As the height is expanded, the background color gradually infiltrates the body of the page

I am currently working on an angular application that utilizes angular-pdf. The controller and view function perfectly, and the PDF is displayed correctly, except for one issue. The height of the PDF exceeds the min-height of the module, causing it to expa ...

"Wordpress Pluto theme: A stellar choice for your

I'm trying to add a link in my main template.index file that will redirect to one of my pages when clicked on the JavaScript button at the top in Pluto theme. Currently, the text is there but clicking on it opens something I don't want. Here&apo ...

Issue with Animation Pause Functionality

I'm currently working on a music loader feature and I'm trying to create a toggle switch to pause and play the music. So far, I've been struggling with this functionality but managed to get it partially working on a simpler project, which yo ...

Strategies for resolving the nodejs $lte endpoint variable issue

I've been working on a mean stack project where both the front end and back end work perfectly in isolation. However, when I try to connect them together, an error arises that I can't seem to trace. The error pops up in the nodejs terminal whenev ...

What is the best way to define an Angular UI Modal without using a controller?

Can the Angular UI Modal controller/object be declared outside of its triggering controller in a separate file without polluting the global namespace? Is it possible to declare the modal controller like a regular controller and pass parameters in from the ...

Splitting data in NodeJS sockets

Whenever I encounter the need to divide data, my standard practice involves converting it into a string format. Here's an example of how I handle data in my function: socket.on('data', function (data) { var str = data.toString().spl ...