The jQuery AJAX post request is displaying an error message stating that the website xxx is not permitted by

I encountered a roadblock while attempting to use AJAX to call the eBay FindProducts API with a POST request. The error message that I got stuck on is as follows:

XMLHttpRequest cannot load . Origin is not allowed by Access-Control-Allow-Origin.

This is the code snippet causing the issue:

$.ajax
({
    type: "POST",
    url: 'http://open.api.ebay.com/shopping?callname=FindProducts',
    dataType: ($.browser.msie) ? "text" : "xml",
    contentType: 'application/x-javascript',
    crossDomain : true,
    data: {
        'X-EBAY-API-APP-ID' : 'ebayAppId', 
        'X-EBAY-API-VERSION': '771', 
        'X-EBAY-API-SITEID': '0', 
        'X-EBAY-API-REQUEST-ENCODING': 'NV', 
        'X-EBAY-API-RESPONSE-ENCODING': 'json',
        'QueryKeywords' : '753759971632',
        'MaxEntries' : '3'
    },
    success: function (result) {
        alert('success');
        alert(result);
    },
    error: function (data) {
        alert((data));
    }
})

What steps can I take to resolve this error?

I attempted to set dataType : jsonp as a workaround (even though XML was being retrieved) but it led to jQuery being unable to parse the XML since it was expecting a JSON response instead.

jqueryajax

Answer №1

By including &responseencoding=JSON in your URL, you can receive the response in JSON format as described in the documentation.

UPDATE: Here is a working example. I updated the code to use dataType:'jsonp' and added jsonp:'callbackname' because eBay expects the callback parameter to be named callbackname, not just callback. Be sure to add your parameters to the data map with the correct names and follow the URL method instead of using the header method. Refer to the documentation for guidance. Hope this explanation helps.

Answer №2

If you refer to the documentation for jQuery.ajax(), it explains how you can utilize jsonp and still have a different return type that needs to be parsed.

various, space-delimited values: After jQuery version 1.5, jQuery is capable of converting a dataType from the Content-Type header into the required format. For instance, if you wish for a text response to be treated as XML, specify "text xml" for the dataType. It is also possible to send a JSONP request, receive it as text, and interpret it as XML through jQuery by specifying "jsonp text xml." Similarly, a condensed string like "jsonp xml" will first attempt to convert from jsonp to xml, and if unsuccessful, proceed to convert from jsonp to text, and finally from text to xml.

All you need to do is modify your dataType line of code to this:

dataType: ($.browser.msie) ? "jsonp text xml" : "xml",

Alternatively, you can include a &responseencoding=JSON parameter in your URL, as recommended in another response.

Answer №3

After much trial and error, I was able to make it work thanks to Albin's advice.

I made the switch to dataType:'jsonp' and added jsonp:'callbackname'. Instead of defaulting to 'callback', eBay required it to be named 'callbackname'. XML wasn't functioning properly due to a CRO issue with eBay (still need to confirm this though).

Utilizing the chrome console for debugging, I was able to retrieve the object and convert it to a string using JSON.Stringify().

Hopefully this information proves helpful to someone else out there!

Cheers, Rajesh

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

Encountered an undefined error while trying to read promises

I'm attempting to receive a response from a function in order to trigger another function, but I am not receiving the expected response. I encountered the following error message: "TypeError: Cannot read property 'then' of undefined." In my ...

javascriptjqueryajaxes6-promise

Maintain fullcalendar event filtering across multiple renderings

I currently have a fullcalendar that initially displays all events. I am using a select dropdown to filter the events, which works well. However, when the calendar re-renders after moving to the next month, it shows all events again. Here is my calendar in ...

javascriptjqueryfullcalendar

Does using .detach() eliminate any events?

I have a DIV that is filled with various content, and I am using the detach() and after() functions to move it around within the document. Before moving the DIV, I attach click events to the checkboxes inside it using the bind() function. Everything seems ...

javascripthtmljquery

Implement a dialog on top of a current web page, achieve php-ajax query result, and enhance with

My website features 'dynamic' content, where 'static' nav-buttons replace specific div contents upon clicking. While I am able to retrieve my php/ajax results in a dialog box, I am struggling with placing this dialog above my current p ...

javascriptphphtmlajaxjquery-mobile

The power trio: jQuery, JSON, and PHP

Greetings, I'm inputting a name on a particular website and then submitting that name by clicking a button. This is the HTML Code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; ch ...

phpjqueryjson

Button to access overlay menu on my map with OpenLayers 3

I am trying to add a menu button on top of my map that, when clicked, will display a window. I have created the map div and the overlayMenu button div, but unfortunately, the button is not showing up where I want it to. I would like the button to be locate ...

javascriptjqueryhtmlcss

Customizing Jquery Validation Engine

Currently, I am trying to set up validation for a text field that should only accept alphanumeric characters and the forward slash (/) symbol. To achieve this, I am utilizing jquery validation engine. My initial attempt involved using class="validate[requ ...

jqueryvalidationrequiredfieldvalidatorjquery-validation-engine

Guide to create a sliding menu transition from the viewport to the header

I am just starting to learn jQuery and I want to create a menu similar to the one on this website Specifically, I would like the menu to slide down from the viewport to the header, as shown in the template in the link. I have searched through the jQuery ...

javascriptjqueryhtmlcss

Perform a secondary AJAX request to the database while the initial request is still processing

When I have two AJAX calls, the first one starts a long-running script and the second one polls a database table for a percentage field. Strangely, when making the second AJAX call, the database query will always return false until after the first one is c ...

phpajaxapachecakephpasynchronous

What is the best way to check the difference between the current date and time with another date and

Seeking assistance in comparing 2 dates using JavaScript has been a bit challenging for me. I haven't found the exact solution on this platform yet. As a beginner in JavaScript, I initially assumed that obtaining the current date and time would be a s ...

javascriptjqueryhtmldatetimeif-statement

How to transform HTML input type with identical names into key-value pairs using jQuery

When the addmorefield button is clicked on this form, two more fields with the same name are appended: <form method="post" id="sampleform" action="#"> <div class="input_fields" style="text-align:center"> <input type="text" name="first_name ...

pythonjquerydjangoajaxdjango-rest-framework

Incorporating a JavaScript code into my SharePoint master page to automatically deselect a checkbox resulted in updating the page title

I've integrated the following JavaScript code into my SharePoint master page: <script type="text/javascript> function DefaultUploadOverwriteOff() { if (document.title== "Upload a document") { var input=document.querySelectorAll("input"); ...

javascriptjquerysharepoint

Upon loading the page, trigger the controller method by utilizing the information from the query string

Can query string data be retrieved on page load with javascript? Here is how I am attempting to achieve this in my project: The view page displays tabular data. When a button is pressed, it retrieves the row's id and invokes a javascript function. ...

javascriptjqueryasp.netasp.net-mvcasp.net-mvc-4

What is the reason behind this HTML/CSS/jQuery code functioning exclusively in CodePen?

I have encountered an issue where this code functions properly in JSFiddle, but not when run locally in Chrome or Firefox. I suspect there may be an error in how the CSS or JavaScript files are being linked. In the Firefox console, I am receiving an error ...

javascriptjqueryhtmlcssjsfiddle

Making an Ajax GET request with an authorization header and CORS in Android version 2.3.3

On my Android 2.3.3 device, I'm trying to perform a cross-domain GET request using CORS Filter on the server. While it works fine on Chrome, Firefox, and iPhone, there seems to be an issue with Android 2.3.3. The preflight request appears to be correc ...

androidajaxoauthoauth-2.0cors

In order to properly adjust the HTML content when resizing the window, it

I'm facing an issue with a toggle setup for displaying content differently based on screen width. Specifically, when the screen size decreases below 600px, it switches to the correct content. However, upon increasing the screen width again, it fails t ...

htmljquery

The Ajax request fails to pass the value to the controller

I've spent the entire day debugging this method and I'm in need of some assistance. My goal is to make an API request and for each array it returns, I want to send a post request to my controller method. However, despite console.log showing the c ...

jqueryajaxpost.net-4.5

Is there a way to utilize jQuery to determine the distance the user has scrolled down?

Looking for some help with changing the style of an element based on scroll position using jQuery. Specifically, I want to add a class name to a div once the user has scrolled beyond 200 pixels and then remove the class name when they scroll back up to l ...

jquerycss

What is the method for using jQuery to retrieve hidden fields with the visible attribute set to "false"?

How can I access a control with "visible = false" attribute using jQuery? Some code examples would be appreciated. <tr>   <td class="TDCaption" style="text-align: left">     <asp:Label ID="lblMsg" runat="server" EnableViewState="False" F ...

jqueryasp.netcssselector

Preserve present condition following a jQuery click event

I'm facing a challenge where I need to hide a button upon clicking another button, but the problem is that when the page refreshes, the hidden button becomes visible again. My objective is to keep it hidden even after refreshing the page and only reve ...

javascriptjqueryhtml