Is the $http call for OPTIONS instead of POST?

Hey there, I'm encountering a strange issue while trying to call my backend using the POST method.

Remote Address:192.168.58.183:80
Request URL:http://192.168.58.183/ESService/ESService.svc/CreateNewAccount
Request Method:OPTIONS
Status Code:405 Method Not Allowed
Request Headersview source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8,pl;q=0.6
Access-Control-Request-Headers:accept, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:192.168.58.183
Origin:http://localhost:8100
Referer:http://localhost:8100/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) > AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36
Response Headersview source
Access-Control-Allow-Headers:Content-Type, Accept
Access-Control-Allow-Methods:POST,GET,OPTIONS
Access-Control-Allow-Origin:*
Access-Control-Max-Age:1728000
Allow:POST    
Content-Length:1565
Content-Type:text/html; charset=UTF-8
Date:Mon, 02 Feb 2015 09:11:17 GMT
Server:Microsoft-IIS/7.5
X-Powered-By:ASP.NET

I've included my code here - can someone please review it and let me know if everything seems correct?

$scope.RegisterUser = function(){
var us = {
  UserName:$scope.userName,
  Password:$scope.password,
  UserRoleID:null,
  Company:$scope.company,
  Terms:$scope.terms,
  ID:null,
  BuyerID:app.buyerId
};

$http({method:'POST', url:app.wcf + '/CreateNewAccount', data:{us:us}})
.then(
    function(resp){
     app.Logger(resp.data);
    },
    function(err){
      app.Logger(err);
})};

It's possible that I'm missing something or need to include additional configs for the http request. Any advice would be appreciated!

Answer №1

Typically, web browsers restrict the ability of your website's JavaScript to access data from a different origin due to security concerns. This is to prevent unauthorized access to sensitive information like online banking details or private intranet content, known as The Same Origin Policy.

An industry standard called CORS allows websites to grant permission for cross-origin data sharing.

For POST requests that can lead to changes in server state, an extra layer of security is applied. Browsers send a pre-flight OPTIONS request before sending the actual POST request to obtain approval.

If your server does not respond properly to this OPTIONS request or lacks the necessary CORS headers for POST requests, it will fail to work as expected.

To enable your JavaScript code to make requests to your server from another domain, you must configure CORS support appropriately.

Answer №2

When making a pre-flight request, CORS needs to be enabled. It's all part of the process and nothing to worry about - perfectly normal.

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

combine ngClass properties if substitution is true

My directive includes replace: true in the definition. <my-custom-tag> </my-custom-tag> This is the template for the directive: <div data-ng-class="{'class1': condition1, 'class2': condition2}"> </div> When u ...

How to style date strings in JavaScript, jQuery, or CSS

Below are dates that need formatting: 7-sep, 14-sep, 21-sep, 28-sep, 5-oct,12-oct, 19-oct,26-oct, 2-nov, 9-nov, 16-nov, 23-nov,30-nov, 7-dec,14-dec, 21-dec,28-dec-2013. Is there a way to tidy them up using JavaScript, jQuery, or CSS? Ideally, I would lik ...

I am unfamiliar with this scenario but I can utilize Axios, async/await, and TypeScript to navigate it

Having trouble creating a workflows list from an axios response Error: Argument of type 'Promise<unknown>' is not assignable to parameter of type 'SetStateAction<WorkflowForReactFlowProps[] | null>'. Here's the Axios c ...

Backbone.js experiencing synchronization issues exclusively in Internet Explorer

Can anyone confirm if they have encountered this issue before? I'm unsure how to elaborate further as it seems to be the only symptom. Additionally, it does not sync correctly in Internet Explorer. ...

Is there a way for me to know when ng-options has completed updating the DOM?

I am currently working on integrating the jQuery multiselect plugin using a directive within my application. Here is the select element: <select multiple ng-model="data.partyIds" ng-options="party.id as party.name for party in parties ...

What is causing this unique component to be positioned outside of the <tr> tag?

table.vue ... <tbody class="table-body"> <slot></slot> </tbody> ... TableCellRow.vue <template> <td class="table-row-cell" :class="this.class"> <s ...

Unspecified tag name attribute in Vue that can be accessed in the browser

At the moment, I have encountered an issue with a selector in Vue returning undefined for {{ lens.price }}. However, when I use a = lens[1].getAttribute('price') in the browser console, it correctly displays the value as "0". Why is Vue showing ...

The issue arises with proptypes validation while implementing material-ui components

Just embarked on a new ReactJS project and ran into a plethora of errors when I integrated material-ui. One of the errors looked like this: bundle.js:12441 Warning: Failed Context Types: Calling PropTypes validators directly is not supported by the prop ...

Troubleshooting Asynchronous Code in JavaScript

I was experimenting with creating a brute force poll voting script. $('#vote').click(function(e) { var votes = 0; var attempts = 0; var failures = 0; for(var i = 0; i < 500; i++){ ...

What is the method for selecting an element using CSS code in Protractor?

Having trouble clicking on the element with CSS Selector: <button _ngcontent-c16="" class="btn btn-flat btn-no-text btn-kebab-view"> <i _ngcontent-c16="" class="zmdi zmdi-more-vert"></i> </button> This is what I've t ...

Displaying a random div using javascript

Seeking a way to display random divs on my webpage, I came across a stackoverflow solution: Showing random divs using Jquery The recommended code can be found here: http://jsfiddle.net/nick_craver/RJMhT/ Despite following the provided instructions, I am ...

Dynamic content display using AJAX

Having already tried to find a solution through Google with no success, I am at a loss. I have articles where a paragraph is initially displayed, followed by a "read more" link which reveals more content using JavaScript. However, this approach may slow do ...

Determine the percentage of clicks on an HTML5 canvas radial progress bar

Recently, I designed a circular progress bar displaying a specific percentage. However, I am facing a challenge in determining how to calculate the percentage when a user clicks on either the black or green part of the circle. Could you provide insight on ...

Issues with the functionality of the ZeroClipboard Angular plugin

"> I'm fairly new to Angular and currently experimenting with a module called ZeroClipboard. I've made adjustments to my application in order to incorporate the module and configured it as per the demonstration. var app = angular.module ...

Utilizing a different file to arrange and establish state

In a separate file called Origin.js, I have some data (objects) stored. This data is exported using the spread operator within an object named OriginState: Origin.js //info const info = { title: '', year: '', }; //images const ...

Frequently refreshing a page to display the most recent information without needing to reload the entire

I am seeking a solution for updating the comments section on my website live or every 30 seconds. The comments are fetched from a MySQL database using PHP: <?php $link = mysql_connect('localhost', 'root', ''); ...

The combination of Three.js and React

Hello everyone! I am completely new to Three.js and I'm currently attempting to integrate it with React. While looking for resources, I came across this helpful medium article on the topic: Starting with React 16 and Three.js in 5 minutes My goal is ...

``There seems to be an issue with retrieving and displaying data in Ionic2 when using nav

I am facing an issue with displaying the data received from NavParams. I have used console.log() to confirm that I am getting the correct data, but for some reason, I am unable to display it on the new page. I suspect that there might be an error in how I ...

Customizing the appearance of Indicators and Paginator in PrimeNG Carousel

I have integrated a carousel using PrimeNG which has the following design here Take note of the style of the carousel indicators and navigators. I want to achieve the default style of indicators/navigators for the carousel as shown here I have included t ...

Retrieve user-specific relational data

In my Supabase database, I have three main tables: users, teams, and members. The users table stores information about all users who sign up using auth. Here are the details contained in this table: id displayname email 602eff1e-6300-491e-b821-44e ...