Origin is not allowed by Access-Control-Allow-Origin for HTTP DELETE - facebook

I currently playing around with the Facebook JavaScript SDK and the Scores API ( https://developers.facebook.com/docs/score/ ). I wrote a small application to save (post) scores and now I want to delete scores. Posting (saving) them works fine.
My code looks like this:
var deleteHighScoreUrl = 'https://graph.facebook.com/'+facebook.user.id+'/scores?access_token='+facebook.application.id+'|'+facebook.application.secret;
jQuery.ajax(
{
type: 'DELETE',
async: false,
url: deleteHighScoreUrl,
success: function(data, textStatus, jqXHR)
{
console.log('Score deleted.');
}
});
The "facebook" variable is an object that holds my application data. For HTTP POST it works fine but for HTTP DELETE I get the response "NetworkError: 400 Bad Request" in Firebug (with Firefox 10). I saw that Firefox first sends an HTTP OPTIONS (to see if it is allowed to use HTTP DELETE) which leads to this error so I tried the same thing with Google Chrome. Google Chrome sends a real HTTP DELETE which then returns:
"XMLHttpRequest cannot load
https://graph.facebook.com/USER_ID/scores?access_token=APP_ID|APP_SECRET.
Origin MY_DOMAIN is not allowed by Access-Control-Allow-Origin".
I think that this is a classical cross domain issue but how to solve it? I've added my domain to my facebook application (at https://developers.facebook.com/apps) and Facebook has a paragraph which is called "Delete scores for a user". So it must be possible to delete the scores (somehow)?

Because of Cross-Site-Scripting (XSS) a HTTP DELETE is not possible. But you can send a HTTP POST request with the query parameter ?method=delete, which then deletes the score.
Code Sample:
Facebook.prototype.deleteUsersHighScore = function()
{
var deleteHighScoreUrl = 'https://graph.facebook.com/'+this.user.id+'/scores?access_token='+this.application.id+'|'+this.application.secret+'&method=delete';
jQuery.ajax(
{
type: 'POST',
async: false,
url: deleteHighScoreUrl,
success: function(data, textStatus, jqXHR)
{
console.log('Score deleted.');
}
});
}

This is the Cross Domain security issue.
The fact that your error contains the message "Origin MY_DOMAIN" would tell me that somewhere in your code you have copied one of Facebook's examples but not changed the value for MY_DOMAIN to the correct domain you are using.
I would check all of your code for the value "MY_DOMAIN".
Please ignore this advice if you have changed the value to hide your actual domain in your question.

Related

Chrome DevTools Protocol Fetch Domain - getResponseBody - apparently fails with HTTP redirects

I am wishing to collect the body of an HTTP request, including when the page redirects to elsewhere. Clearly, I can use non-Fetch domain mechanisms such as Network.getResponseBody. That works fine for the "final" page in a chain of redirections, but cannot be used for the intermediate pages because Chrome appears to dump the content when going to the next redirection target.
So, I implemented Fetch.enable( { patterns: [ { requestStage: Response } ] } ) (using PHP, but the details of that are irrelevant, as you will see). No error is returned from this method call. After then doing a Page.navigate, I wait for a Fetch.requestPaused event which contains members requestId, responseStatusCode and responseHeaders and then send a Fetch.getResponseBody (using the requestId from the Fetch.requestPaused) and the response I get depends on what the actual response to the page itself was. So, for a 200, I get a response body (hurray), but for a 30x (301, 302 etc), I always get error code -32000 with the message "Can only get response body on requests captured after headers received". Now, issuing that error message is inconsistent (in my view) with the Fetch.requestPaused event data, even if Chrome DevTools Protocol (CDP) was not intended to capture the bodies of HTTP redirected pages. By the way, pages with content triggered redirection (via a META element or JavaScript) are captured okay, I assume because they return a 200 status code.
So, is the issue in the sequence of calls I'm following or in the error message returned by Fetch.getResponseBody and am I correctly assuming CDP was not intended to capture the bodies of documents in a redirection chain (apart from the last one, obviously)?
You need to continue the request on a 301/302 and let the browser follow it (there is no body in a redirect):
if (
params.responseStatusCode === 301 || params.responseStatusCode === 302
) {
await this.#client.send('Fetch.continueRequest', {
requestId,
});
} else {
// get body here
const responseCdp = await this.#client.send('Fetch.getResponseBody', {
requestId,
});
await this.#client.send('Fetch.fulfillRequest', {
requestId,
responseCode: params.responseStatusCode,
responseHeaders: params.responseHeaders,
body: responseCdp.body,
});
}

Fetching album art from the Cover Art Archive (archive.org) API leads to CORS errors due to redirects

I'm developing a frontend for the MusicBrainz API that can search for artists as well as their releases (release groups, specifically). When I attempt to find a certain cover art from the release group's respective MusicBrainz ID (MBID) via their Cover Art Archive with the Axios library, I receive two CORS errors:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://ia802802.us.archive.org/9/items/mbid-<any MBID>/index.json. (Reason: CORS request external redirect not allowed).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://ia802802.us.archive.org/9/items/mbid-<any MBID>/index.json. (Reason: CORS request did not succeed).
What I've done so far
Following some research, I realised that the Cover Art Archive does not host their own images; rather, accessing their API leads to a redirect to the Internet Archive API. As such, I am instead going straight to the IA API in order to find the cover art I need, as I can find it with a MBID there, too. This itself would lead to a CORS error, but I am using a proxy (with Nuxt.js), meaning I can connect to the Internet Archive - at least initially - with no issue.
proxy: {
'/archive': {
target: 'https://archive.org/',
pathRewrite: {
'^/archive': ''
}
}
},
The main issue is that the IA then redirects again to a destination that is dynamic and often changes. Due to this, I am unable to predict where the redirect will go and I cannot avoid the aforementioned CORS errors, even via a proxy - Axios does not use it here, understandably.
I have researched this fairly extensively and I cannot find how to prevent these errors from appearing when I cannot stop the redirects from happening.
const getAlbumArtLocation = (release, index) => {
this.$axios
.get(
'/archive/download/mbid-' + release.id + '/index.json'
)
.then((res) => {
const imageURL = res.data.images[0].image
getAlbumArt(imageURL, index)
})
.catch((err) => {
// Try get another album artwork.
console.error(err)
index += 1
getAlbumArtCandidate(index)
})
}
The code for the file in question can be found here.
My Nuxt configuration can be found here.
It's worth noting that these errors only appear in Firefox and not other Chromium-based browsers.
EDIT
As you are using #nuxtjs/proxy middleware, which is using
http-proxy-middleware, you can configure the proxy to follow redirects (which is off by default) - so redirect response will not be returned to your client but proxy will follow the redirect on the server and return only final response...
Change your nuxt.config.js from:
'/archive': {
target: 'https://archive.org/',
pathRewrite: {
'^/archive': ''
}
}
to:
'/archive': {
target: 'https://archive.org/',
pathRewrite: {
'^/archive': ''
},
followRedirects: true
}

Atlassian Jira - 401 only when using query parameters

Currently working on a JIRA addon using the ACE framework. Executing a request using the integrated httpClient.
When I make a request such as this
https://instance.atlassian.net/rest/api/3/search
it works fine using the header Authorization: JWT <token> but when I run the same request with a query parameter like this
https://instance.atlassian.net/rest/api/3/search?maxResults=1
the request fails with a 401. I have confirmed that the JWT is not expired due to reverting the query parameters and seeing success again.
My atlassian-connect.json has scope READ as requested by the endpoint.
Any suggestions?
I was surprised that the rest call "rest/api/2/search?maxResults=1" worked. But it did when I was logged into my instance.
If I try that as JQL in Issue Search (maxResults=1), I get an invalid or unauthorized error message.
My instance is on premise (API V2). Yours appears to be in the cloud (V3). So it may be that the REST search works more like the Issue Search in V3 and is therefore returning the 401
It's a guess that should be easy to test... replace your maxResults=1 with some actual JQL or a filter ID and see if your results change
Since you're using ACE and utilizing httpClient, you might want to try the checkValidToken() route instead. The snippet below worked for me.
app.get('/mySearch', addon.checkValidToken(), function(req, res) {
var httpClient = addon.httpClient(req);
httpClient.get({
url: '/rest/api/3/search?maxResults=1',
headers: {
'X-Atlassian-Token': 'nocheck',
'Content-Type': 'application/json'
}
},
function (err, httpResponse, body) {
if (err) {
return console.error('Search failed:', err);
}
console.log('Search successful:', body);
});
});

upload a file in SAPUI5 and send to Gateway server

I am having difficulties trying to figure out a way to send uploaded file and send it to a Gateway server. I am using the basic FileUploader control.
***<u:FileUploader
id="fileUploader"
name="myFileUpload"
uploadUrl="upload/"
width="400px"
tooltip="Upload your file to the local server"
uploadComplete="handleUploadComplete"/>
<Button
text="Upload File"
press="handleUploadPress"/>***
And in the controller I have the following event handler
***handleUploadPress: function(oEvent) {
var oFileUploader = this.getView().byId("fileUploader");
oFileUploader.upload();
}***
What code should I add after oFileUploader.upload() to have an xstring that I can pass to my attachment property of my OData srvice
Thank you
The first thing to do is to make sure that you have a gateway service that is able to handle media types and streams. To set this up you need to set the entity that is handling the file content as a media type and get the logic in place that deals with streams (CREATE_STREAM). You can find more information on how to do this in this SCN blog.
In your UI5 application, you will have to set the URL of the upload control to e.g. /sap/opu/odata/sap/AWESOME_SERVICE/Customers('0000123456')/$value so that the file is handled by the CREATE_STREAM method that you just implemented.
When the upload is eventually taking place, you need to deal with two header parameters; the slug and the CSRF token. The slug header should be set to e.g. the filename, while the CSRF token needs to be retrieved using a pre-flight request. To set the headers, you could use something like this:
oFileUploader.addHeaderParameter(new FileUploaderParameter({
name: "x-csrf-token",
value: _csrfToken
}));
The slug header parameter could be set in a similar way and should contain something that identifies the file, e.g. filename or id.
To determine the CSRF token, you could do something like this:
var _csrfToken = "";
jQuery.ajax({
url: "/sap/opu/odata/sap/AWESOME_SERVICE",
headers: {
"X-CSRF-Token": "Fetch",
"X-Requested-With": "XMLHttpRequest",
"DataServiceVersion": "2.0"
},
type: "GET",
contentType: "application/json",
dataType: 'json',
success: function(data, textStatus, jqXHR) {
_csrfToken = jqXHR.getResponseHeader('x-csrf-token');
}
});
With the right header parameters in place, sending the file to a properly configured gateway entity should do the trick to get your file uploaded.

FB API: Resource interpreted as Script but transferred with MIME type text/html

I'm using FBJS to post photo
FB.api('me/photos', 'post', {
message: 'some message',
url: 'some url'
}, function(response){
if (!response || response.error) {
/*some error alert*/
else {
/*some success*/
}
}
});
Almost, it works fine, but OCCASIONALLY, it shows error alert.
I see on Console, it says: Resource interpreted as Script but transferred with MIME type text/html
How to deal with it?
I've tried some solutions (such as Content-Type, script type...) but it still does not works in SOME times :(
Please help me.
I had that problem and in my case the reason was local - the "Disconnect" Chrome addon, that was blocking requests to facebook, I just forgot that I had it installed.
Have you tried
headers: [
{ "name":"Content-Type",
"value":"text/javascript; charset=UTF-8"}
]
If it is only occasional, maybe you're hitting an API call limit and it's returning an error? Check that the data is correct, even if it is getting an error. Use fiddler to get more clear diagnostic results.