Handle cross-domain failures by using ExtJS to send an Ext.Ajax.request

Hello, I understand that this may be an older issue.

I have consulted this source, but unfortunately, the solution provided did not work for me.

Upon using Chrome, the following error message is displayed:

XMLHttpRequest cannot load target url. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'my web url' is therefore not allowed access.

The code I am currently using is as follows:

Ext.Ajax.request({
        url: 'target url',
        method: 'POST',
        cors: true,
        useDefaultXhrHeader: false,
        success: function() {
            alert('success');
        },
        failure: function() {
            alert('failure');
        }
    });

Answer №1

The important clue to solving the issue can be found right in front of you within the very first sentence of the post you referenced; allow me to quote it:

Backend sends Access-Control-Allow-Origin: * correctly

Your browser is indicating that your backend is not doing this as intended:

No 'Access-Control-Allow-Origin' header is present on the requested resource

The problem arises from the fact that the browser restricts your code from accessing data freely. The server must give explicit permission for your page to retrieve json data by setting the Access-Control-Allow-Origin header accordingly (for example, to target url to permit your site only, or * for wide access).

If you cannot figure out how to implement this header in your backend on your own, consider posting a new question with specifics about the backend platform you are using.

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

Looking to switch up the background color while scrolling, any tips?

I'm trying to change the background color of my navbar section on scroll, but I've had no luck so far. Below is the code I have been using: const [colorChange, setColorChange] = useState(false); const changeColor = () => { if (window.scro ...

Transforming a cURL command into an HTTP POST request in Angular 2

I am struggling to convert this cURL command into an angular 2 post request curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -H "Authorization: Basic cGJob2xlOmlJelVNR3o4" -H "Origin: http://localhost:4200/form" -H "Postman-Token: fbf7ed ...

Populate a form with database information to pre-fill the fields

So I have this web form built with HTML, and there are certain values within the form that can be changed by the user. To ensure these changes are saved, I'm storing them in a database. My goal is to have the form automatically filled with the data fr ...

Unable to access child props in parent event handler in React

Currently utilizing React for building a UI, the structure involves a parent component and a child component as shown below: // Child Component var ListItem = React.createClass({ render: function() { var link_details = ( <div> ...

Encountering difficulties in retrieving the JSON data from the web service

My external web service contains JSON data which has been validated using the JSON Validator website. However, I am facing an issue where the success function in the code below is not running at all. The web service necessitates that the email and password ...

Tips for utilizing Bootstrap 4 exclusively within a designated Bootstrap Modal

Currently, I am working on an application that utilizes Bootstrap 3. Unfortunately, the Bootstrap 3 files (.css/js) have undergone extensive modifications. My task involves integrating the SummerNote Text editor, and although everything is functioning corr ...

Tips for creating a condensed header

As a newcomer to HTML, I am facing challenges in creating a simple header similar to the one displayed on this website or the example in the image below. Below is the snippet of HTML that I have attempted: <header class="header"> <div ...

Finding the substring enclosed by two symbols using Javascript

I'm working with a string that contains specific symbols and I need to extract the text between them. Here is an example: http://mytestdomain.com/temp-param-page-2/?wpv_paged_preload_reach=1&wpv_view_count=1&wpv_post_id=720960&wpv_post_se ...

JavaScript: set values to elements in an array

Below is the code snippet I am working with: function gotData(data){ result = data.val() const urls_kws = Object.keys(result) .filter(key => result[key].last_res > 10) var keywords = urls_kws; c ...

What is the best way to play a random song when the user clicks a button?

My goal is to develop a website where users can click on an image and have a random song play from a playlist. I currently have a functioning code that activates one song, but it fails when adding multiple songs to the mix. <html> <head> ...

Here are steps to prevent swiping fancybox slides using mouse movement

Currently utilizing fancybox 3, I am looking to disable the swipe function for fancybox slides triggered by mouse movement. My preference is to only have the control buttons (next/prev) available. Is there a way to achieve this? Thank you. ...

How can I arrange the ng-class based on the clicked item's order?

http://plnkr.co/edit/pUtuZy?p=preview In this scenario, there are three different border classes available: .border1 { border: 1px solid #66FFFF; } .border2 { border: 1px solid #33CCFF; } .border3 { border: 1px solid #0099FF; } The goal is to as ...

How can I easily bring in multiple images from a directory in ReactJS?

Looking to import multiple images from a folder and use them as needed, but encountering some difficulties with the current approach. What could be going wrong? import * as imageSrc from '../img'; let imageUrl = []; imageSrc.map( imageUr ...

Switching buttons with AngularJS

I am currently working on a Github search app using the Github API in Angular. My goal is to make it so that when the user clicks the "Add to Favorite" button, the button disappears and the "Remove Favorite" button is displayed instead. I attempted to achi ...

Tips for attaching an event listener to activate a server-side email feature?

I have a setup with an express application that serves up a static index.html page. Additionally, there is a function in my app.js file that sends an email whenever the server starts running. My goal is to modify this so that the email is only sent when a ...

When HTML elements are unable to access functions defined in separate JS files

After successfully resolving the issue, I am still curious as to why the initial and second attempts did not work: The problem lay with an HTML element connected to an event (myFunction()): echo '<button class="btn remove-btn" onclick="myFunction( ...

Errors that occur during Javascript runtime in the Express framework

I'm currently working on an Express app with several routes. One of them looks like this: router.post('/upload', (req, res) => { let audioFile = req.files.audioFile; const file = __dirname + '/../' + req.body.uploadLocation ...

Transform a text string into JSON format using Javascript

I need help converting a text string to JSON format using JavaScript. The text string is as follows: workingtable;AB8C;book_id;7541; I want to convert it into JSON format like this: {"workingtable":"AB8C","book_id":"7541"} Is there a specific JSON funct ...

Encountering issues due to overriding JSON.stringify

Recently, I developed a customized function for JSON.stringify implementation as shown below: JSON.stringify = function (item, replacer, space) { return JSON.stringify(item, replacer, space); } This modification led to multiple errors in AngularJS w ...

Using jQuery .css({}) is not causing negative margin to function as expected

$('#thankYouMessage').css({"height": textHeight, "margin-top:": "-52px", "padding-left": "19px"}); The CSS property 'padding-left:' will be applied as expected, but the negative margin will not take effect. The 'margin-top:' ...