We Keep Coding

Unable to show data to javascript after getScript() from API contain Json block database

I am new to Ajax/json/jquery so I have few questions. Currently, I'm having an API like https://example/api/1.1 which contain JSON block look similar to this
[{"id":"1","FirstName":"Micheal","LastName":"Kooling"},{"id":"2","FirstName":"Mike","LastName":"Kooling"}]
I tried to use XMLHttpRequest and AJAX to fetch the data but it gave me an error that I have been blocked by CORS: No 'Access-Control-Allow-Origin' header is present on the requested resource. And I have looked at a lot of article about it and nothing worked yet so if anyone can help me solve this?
So I tried another way using $(function(){ $.getScript('https://example/api/1.1');}); and this time the server response the data correctly but I do not know how to show the data from the API to script?
Can anyone explain me why the server respone and did not get blocked when I'm using getScript() function?

The API-Server has to be configured to accept your request. Otherwise it will block it and the client will throw the CORS error. The only way around this is to let your server request the API and then let the client make a request to your server, or to ask the owner of the server to enable CORS for your domain.
For further information look at the documentation: https://developer.mozilla.org/de/docs/Web/HTTP/CORS

What is the difference between getJSON() function and post() function when make a request across domain?

I am trying to access a Google Apps Script WebAPI from my website using javascript to pass some value and create an excel file and download it through this API.
I tried 2 following way:
Using POST request with $.post.
My values are many. So, at first, I use a POST request with a body is JSON of list values. Browser rejects API response, because of CORS error.
I researched about CORS to understand it. At some topics, I found a solution is the following second way.
Access to XMLHttpRequest at 'https://script.google.com/macros/s/xxxxxxx' from origin 'https://example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Using GET request with $.getJSON.
I pass JSON of list values to URL parameter and make GET request. It worked fine.
var url = 'https://script.google.com/macros/s/' + api_id + '/exec?' + request_parameter_string;
$.post(url, payload, function(data, textStatus) {
// Do something
}, 'json');
$.getJSON(url, function(json_result) {
// Do something
})
.fail(function() {
// Do something
});
What I do not understand is why? Why it works with getJSON but not work with post?
I think CORS work with both of GET and POST requests. And I checked the response header with Postman. The headers are the same Access-Control-Allow-Origin →*.
I think have something is different inside getJSON and post functions.
*UPDATE: Update POST CORS error message.

GET requests are not bound by CORS we can host images and static files in CDN which is different from the origin and would help in improving the performance by caching and making parallel requests.
Similarly GET is used for serving ads, trackers and analytics from third party domains as well.
More information about Same Origin Policy and GET is at https://security.stackexchange.com/a/16221/9517
How the browsers identify Other HTTP Verbs are allowed for the cross origin request is elaborated # https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request

How To Call Medium RSS Feed

Medium has an RSS feed available at https://medium.com/feed/[#username]. I'm trying to fetch all my blog posts using an XMLHTTPRequest. When I test on local, I run into CORs errors. When I turn on CORs Chrome extension, I get a 401 error. Any ideas? Has anyone succeeded in calling Medium RSS?

To get https://medium.com/feed/[#username] content using XHR, you can make the XHR request through a proxy of some kind. For example, trying giving your current XHR code this URL:
https://cors-anywhere.herokuapp.com/https://medium.com/feed/#sideshowbarker
That’ll cause the request to go to https://cors-anywhere.herokuapp.com, a open/public CORS proxy which then sends the request on to https://medium.com/feed/#sideshowbarker.
And when that proxy gets the response, it takes it and adds the Access-Control-Allow-Origin response header to it and then passes that back to your requesting frontend code as the response.
That response with the Access-Control-Allow-Origin response header is what the browser sees, so the error message the browser is showing you now goes away, and the browser allows your frontend JavaScript code to access the response.
Or use the code from https://github.com/Rob--W/cors-anywhere/ or such to set up your own proxy.
The reason you need a proxy is, responses from https://medium.com/feed/[#username] don’t include the Access-Control-Allow-Origin response header, so your browser will refuse to let your frontend JavaScript code access those responses cross-origin.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS has more details.

This is a bug.
Bug has opened. (Dan Abramov approved)

jquery json error, when i want to get json from steam market

I have a problem with ajax request to Steam.
I want to get price from steam market.
function jPrice(httpToJson) {
$.getJSON(httpToJson, function(data) {
return data.median_price;
});
}
When I call function
jPrice('http://steamcommunity.com/market/priceoverview/?country=US&currency=1&appid=730&market_hash_name=StatTrak%E2%84%A2%20P250%20%7C%20Steel%20Disruption%20%28Factory%20New%29');
I get an error:
XMLHttpRequest cannot load http://steamcommunity.com/market/priceoverview/?country=US&currency=1&appid=730&market_hash_name=StatTrak%E2%84%A2%20P250%20%7C%20Steel%20Disruption%20%28Factory%20New%29. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://lоcalhоst:63342' is therefore not allowed access.
I try:
Set php header Access-Control-Allow-Origin to *
JSONP
RESULT -> The same thing (error)!
Maybe someone knows a solution to this problem?

You won't be able to get the results in your browser via ajax request made directly against steamcommunity.com, neither by setting the header Access-Control-Allow-Origin to *, nor by sending a JSONP request.
For this to work, steamcommunity.com should either add CORS headers in the response (the error message you're seing means that they are not there), or format the output to be JSON-P. They didn't do either.
This is a browser restriction, do not allow the content from a different origin to be loaded via ajax. What you need to do is introduce a middle-ware, so have your back-end server to make a request against steamcommunity.com and return the same response, and make the ajax call against you're server. This will work, your back-end is sending the request, and as it is not a browser request, the response will land, than your ajax call will be able to get the response as well since it is issued against the same domain

Extracting HTTP Headers from HTTP 300-code responses using Ajax

I am performing an Ajax request to a server that accepts cross-domain requests but for which I have no control over the server code. My desire is to extract an HTTP Link header from the response. As an example:
$.ajax({
url: theURL
}).done(function(data,textStatus,xhr){});
hits a server that responds with the following (as observable when the URL is queried with curl):
HTTP/1.1 302 Found
Link: <http://thedataIwant.com>;rel="foo"
Location: http://someothersite.com
The browser follows the HTTP 3XX code and I get the contents of the HTTP headers from http://someothersite.com in the done() handler; however, I would like to first extract the contents of the Link header for the initial HTTP response with the 3XX code.
How do I go about extracting the contents of the HTTP Link header from an HTTP response with 3XX status code?

I was intrigued by your question and though to search around for a solution. Unfortunately, there isn't a direct one. According to all posts I read so far (How to manage a redirect request after a jQuery Ajax call and many similar ones) you can't simply catch the 301 redirect because browsers usually fetch the content and give the endpoint to the user, which is why you get the 200 status code instead of the 302. As a workaround, people are suggesting to use a custom header. When you receive the header after doing an ajax request, you could do your own manipulation i.e. save the Link header and then make a second ajax request to get the content from MyRedirectLocationHeader: http://someothersite.com.
The code would look something similar to this:
$.ajax({
url: theURL,
success: function(response, status, xhr) {
var link = xhr.getResponseHeader('Link');
if(link != null) {
// my second ajax request to the link in the MyRedirectLocationHeader
}
}
});
This is an awful looking hack, but that's the only workaround I've found so far which actually works. Another way might be for you to create a proxy script/service using PHP,Java or another similar language, that would get the request without following the redirects and would print out only the Link and Location as JSON or XML. Afterwards your javascript would parse the response and proceed to someothersite.com
What is interesting to me, though, is that the official jQuery ajax documentation page implies there is support for the 3xx redirects (near the documentation for the statusCode) but that doesn't seem to be working.