I am trying to retrieve the value of "Location" from the response I get from an API call. The response does not have any body, but it contains a value(URL) in the Location section of the header.
Any way I can get the value of header using javascript. The response variable that i am using is of type XML. This is being implemented in IBM BPM 7.5
Typically, the Location header of a response comes in conjunction with a 3xx status code. Unfortunately, with AJAX, redirects are followed, so you cannot inspect the header of a redirect response.
However, if your response is not a redirect, you can use the getAllResponseHeaders() function to inspect your headers.
Related
I'm trying to get the redirected URL of an image from an external server with CORS enabled, this can't be done on the server due to the react app not having a central server, I am not in contorl of the remote server. The content of the image doesn't really matter, just the URL.
Here's what the response headers are
Access-Control-Allow-Credentials true
Content-Length 170
Expires -1
Location http://someimage.com/png
If you want your React app to get the content of the Location header, you can fetch the URL, and get the headers from it. See this documentation about Fetch response headers.
Here is an example from this page :
fetch(myRequest).then(function(response) {
console.log(response.headers); // returns a Headers{} object
});
You can find some documentation on the Header class here.
If you are not using fetch, you can probably access the response headers from the API you are using (XMLHttpRequest or axios for example).
However, if what you want is to get the image from a URL, knowing that this given URL is redirecting (with a 301 status code and this Location URL for example), then you can just call this URL. The browser will take care of following the redirection automatically.
I'm trying to scrape OG data using open-graph-scraper and Vue.js, but it gets blocked because of CORB in Chrome. It is working fine for scripts I run using Node, but is there a work around for this problem or another to get OG data from an input URL?
Cross-Origin Read Blocking (CORB) blocked cross-origin response SOME-INPUT-URL with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.
CORB is a standard that is based around the idea
"what I asked for is what I received"
if you are troubleshooting CORB errors in chrome it means that your request method is being responded to with either no content type or a content type that does not correspond to your method of request.
in a 3rd party API what I would recommend is using a tool like postman (unaffiliated) to inspect the incoming content type in the response headers. Once you know the content-type header of the call then tweak your request method in an attempt to match the expected output. Many API's use poorly implemented frameworks so just because the response is well formed JSON doesn't mean that the header will say JSON. I often see json outputs where the headers are 'text/plain'.
If this doesn't work, for example some api's fail to respond with content headers at all
- another method would be to use an intermediary call to make the request. For example using a combination of the AWS API gateway and a AWS Lambda function you can create a route that will make the request using node but where you then gain the total control over both the response headers and body. You can then add the content header you desire and pass it back to your client.
ref:
https://www.chromium.org/Home/chromium-security/corb-for-developers
This question already has answers here:
XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
(11 answers)
Closed 3 years ago.
I'm unable to retrieve data from the Rescue Time API. I'm making a request in a JavaScript file using the jQuery get() method. Here is a look at the JavaScript related to the API GET request:
$.get('https://www.rescuetime.com/anapi/data?key=########################&format=json&restrict_kind=overview', function(data) {
// callback function code...
});
The "key=########################" is the paramater that includes my API key.
When running the script (either locally or on my personal domain), I receive a cross origin error:
XMLHttpRequest cannot load https://www.rescuetime.com/anapi/data?key=########################&format=json&restrict_kind=overview. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
I understand that this is happening because i'm requesting content that is on a different domain than the one that is making the AJAX request. That being said, how do I get around this? I've read the CORS MDN documentation, but could not decode what actionable steps I need to follow in order to resolve this issue.
I need some actionable steps.
Set up a CORS proxy using the code from https://github.com/Rob--W/cors-anywhere/ or similar.
https://cors-anywhere.herokuapp.com/ is a public instance running that code, and the way you could use it is by changing your existing code to this:
$.get('https://cors-anywhere.herokuapp.com/https://www.rescuetime.com/anapi/data?key=########################&format=json&restrict_kind=overview', function(data) {
// callback function code...
});
Be aware though that if you do that, your key would potentially be exposed to the operator of that https://cors-anywhere.herokuapp.com/ instance. So if that’s a concern then don’t try it, and instead set up your own proxy at https://some.url.for.your.proxy and change your code to:
$.get('https://some.url.for.your.proxy/https://www.rescuetime.com/anapi/data?key=########################&format=json&restrict_kind=overview', function(data) {
// callback function code...
});
Either way the result will be that your request gets sent through the specified CORS proxy, which forwards the request to the https://www.rescuetime.com/anapi/data… endpoint and then receives the response. The proxy backend then adds the Access-Control-Allow-Origin header to the response and finally passes that back to your requesting frontend code.
Your browser then allows your frontend code to access the response, because that response with the Access-Control-Allow-Origin response header is what the browser sees. Otherwise, if the response lacks Access-Control-Allow-Origin, browsers won’t let your code access it.
A CORS proxy like that is the only option if you want to make the request from frontend JavaScript code running in a browser, and want to consume the response from that frontend code. Otherwise, without the use of such a proxy, browsers will block your code from accessing the response—because the https://www.rescuetime.com/anapi/data… API endpoint doesn’t itself send the necessary Access-Control-Allow-Origin response header.
Your only other option otherwise is to not make the request from your frontend code but instead make the request from whatever backend server-side code you’re running. In that case there’s no browser in the middle enforcing cross-origin restrictions on the request.
I am using ionic framework and angular js, I use chrome for viewing my logs but here I am doing a login page I am trying to post the user entered data to serve but I am getting this error like -
XMLHttpRequest cannot load - Response for preflight has invalid HTTP status code 405.
My code works fine on a device but I am getting the error in chrome. Anyone know the root cause of this error.
Cross-Origin Resource Sharing actually specifies that two requests should be made to the server on an AJAX call (if certain conditions apply, like sending custom headers).
The first request (the one with the OPTIONS method) is called pre-flight and is used to check if it's safe to send the full request to the server. The response from the server should contain a valid Access-Control-Allow-Origin header containing the URL of the client or *.
HTTP 405 means Method Not Allowed. You may be sending the request with a different method on chrome. If you try the URL directly in browser it triggers a GET request on that URL.
I have a URL that calls an API which returns a json response but the request going out doesn't have the correct headers for some reason.
The URL is inside the src property of a script tag.
How can I add the headers back in to set the content-type and accept header?
Since I'm not doing an AJAX call or a get request implicitly could I still do this?
You cannot place headers in script tags.
If your API is on the same domain, you can do an Ajax Request with JSON as a data type.
If not, my advice would be that you create a proxy on your servers that cURL to your API.
In both these scenarios, you will be able to send proper headers with your calls.
You cannot, but do you get response as string? I have had that kind of problems some so downloaded a json.js from json.org and converted response string to json.
var var1 = '{json string here}';
var result = JSON.parse(var1);