When attempting a POST request to the API for a JavaScript application, a 400 Bad Request error is received, unlike with an ASP

Insightful discussion about CORS No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API

I designed a local asp.net MVC application using C# (httpclient) for POSTing data to an API on a server that allows CORS, and it functions correctly. However, the JavaScript application I am running locally presents the following issue:

Unable to access XMLHttpRequest at '' from origin 'http://localhost:3000' due to CORS policy blocking: No 'Access-Control-Allow-Origin' header found on the requested resource.

GET requests function properly in the JavaScript app. Here is an excerpt of the code:

axios({
  method: 'post',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
  },
  baseURL: 'https://apiurl',
  url: '/oauth/token',
  data: {
    grant_type: 'password',
    username: this.state.username,
    password: this.state.password
  }
}).then(resp => {
  console.log(resp);
});

The API is WEBAPI with CORS enabled.

config.EnableCors(new EnableCorsAttribute("*", "*", "*"));

I am aware that proxying could be a solution, but I am interested in finding out if there is anything else I might have overlooked.

Answer №1

Make sure to specify the Access-Control-Allow-Origin as https://apiurl, and also enable withCredentials by setting it to true.

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

PHP Ajax file uploads can be tricky, as they often result in the frustrating "undefined

Encountering issues with submitting file through ajax. Despite following instructions from various sources, the formdata does not seem to contain the file resulting in an 'undefined index 'image'' error. <form enctype: 'multip ...

Generating Bootstrap Vue Dropdown components in real time

I am currently utilizing Bootstrap Vue to construct a dynamic Dropdown component that can render different elements such as item, title, and divider. Is there a method to accomplish this task effectively? The desired outcome for the Dropdown component wou ...

Despite setting the necessary Access-Control-Allow-* headers, the CORS ajax call still encounters a failure

My ajax call from a third-party-hosted script to my endpoint is encountering some issues. In Chrome, the preflight call appears as follows: GENERAL Request URL: https://my_endpoints_url Request Method: OPTIONS Status Code: 200 Remote Address: 21.188.37.1 ...

Issues with functionality of React/NextJS audio player buttons arise following implementation of a state

I am currently customizing an Audio Player component in a NextJs application using the ReactAudioPlayer package. However, the standard Import Next/Audio and using just <Audio> without props did not yield the expected results. The player functions as ...

Discover how to use jQuery to add CSS styles to every span element on a

I'm currently using JavaScript and jQuery to create a tree structure in ASP.NET MVC. There's an 'add' button that will add siblings and child nodes at the same level. To determine the appropriate action, I have implemented the followi ...

Proceed with executing the function only if the current date is before the specified date

I've created a countdown timer that can count both up and down from a given date. However, I want the countdown to only run in reverse and stop once it reaches the current date or any future dates. Currently, the alert message shows when the date is r ...

Determine the frequency of duplicate elements in an array and arrange them in descending order based on their frequency

After making an API call, my array is populated with values like this: ["9777", "9777", "2.4", "9777", "2.4", "2.4", "9777", "2.4", "2.4", "9777", "9777", "2.4", "2.4", "2.4"] My goal is to count the occurrences of each item in the array and then sort th ...

Troubleshooting a JavaScript Error on an ASP.NET MasterPage

After implementing the following JavaScript code: <script type="text/javascript> $(document).ready(function () { $('#social-share').dcSocialShare({ buttons: 'twitter,facebook,linkedin,di ...

Crosswalk code unable to detect electronic devices

The implementation of a rails application involves the following code snippet: <div id="sourceSelectPanel" style="display:none"> <label for="sourceSelect"& gt;Change video source:& lt;/label> <select id=" ...

How can I update the language of a button text in a React component?

Looking to update the button labels from a different language to English. Here is how it currently appears: https://i.sstatic.net/6JZ6m.png ...

PHP captures the checkbox value through the $_POST method, whereas jQuery removes the checked class from it

I currently have a form with 2 checkboxes: Registered and Not Registered. If the Registered checkbox is ticked, then 2 additional options should appear: Active and Not Active. If the Registered checkbox is unticked, both the Active and Not Active options ...

Continuous Load More: Loads content infinitely until a page is fully loaded

I am currently experimenting with implementing infinite ajax scroll within a Bootstrap modal. Below is the initial appearance of the modal, before any data is loaded: <div class="modal fade" id="modal" tabindex="-1"> <div class="modal-dialog" ...

The challenges of $location.search().name and base href in application URLs

I am working on an Angular app and my URL appears as http://localhost:8080/personal?name=xyz. To extract the 'xyz' value in JavaScript, I am using $location.search().name. Here is a snippet of my code: app.js app.config(function ($locationProv ...

Is there a standardized method for obtaining a date in the format of six digits as YYMMDD?

In my current project, I'm developing a function that generates a list of dates represented in a 6-digit format beginning from the present day up until August of 2018. The desired output should resemble the following: [190322, 190321, 190320, ...] I ...

Issue with webcomponents-lite.js file

Encountering this particular error message in the console while attempting to run the application: webcomponents-lite.js:64Uncaught TypeError: Cannot read property 'getAttribute' of null at webcomponents-lite.js:64 at Object.549 (webcomp ...

Disappearing act: The vanishing act of the Bootstrap 4 Smart Scroll Mobile

Utilizing the Smart Scroll feature from in Bootstrap has been successful on desktop, but issues arise on mobile devices. When scrolling down and returning to the top, the navbar experiences glitches by hiding again. Attempting solutions from Bootstrap 4 S ...

Make the minimum height of one div equal to the height of another div

My query is somewhat similar to this discussion: Implementing a dynamic min-height on a div using JavaScript but with a slight twist. I am working on a dropdown menu within a WordPress site, integrated with RoyalSlider. The height of the slider div adjust ...

Tips for creating a hover-activated dropdown menu

How can I create a drop-down menu in my horizontal navigation bar that appears when hovering over the Columns tab? The drop-down menu should include options such as Articles, Videos, Interview, and Fashion. To better illustrate what I am looking for, here ...

Converting a Google font for compatibility with ThreeJS: A beginner's guide

Is there a way to convert a downloaded Google font from TTF to JSON in order to use it with ThreeJS FontLoader / TextGeometry? import LatoFont from '../assets/fonts/lato-bold.json' const loader = new FontLoader(); const font = loader.parse(LatoF ...

Encountering silence: React JS fetch call left unanswered by Sinatra server

Exploring the realms of Sinatra and React JS, I am venturing into making a GET call from my React website to a Sinatra server in order to display plain text. The Sinatra Server script: require 'sinatra' set :root, 'lib/app' before d ...