In my React Native app I'm sending a GET request to a backend server to fetch some data. This is how I create a destination URL:
get(config.PACKAGES_URL + '?uuid=' + uuid + '&type=P12&purpose=MAINTENANCE', {}, {Authorization: token})
and this get function is defined as
get = (url, params, headers) => (
fetch(`${url}?${queryString.stringify(params)}`, {
method: 'GET',
headers: headers,
})
The URL is created properly, but Debugger shows me that it also has a question mark ( "?" ) at the very end. That messes up the request and causes the backend not being able to process it. Is there a way to remove that question mark? I suppose it's debugger related problem and when I would switch to release I wouldn't get this. I need to be on the debugger mode though.
EDIT: Got it fixed by moving the uuid, type and purpose from URL do BODY. So now it looks like this:
get(config.PACKAGES_URL,
{
uuid: uuid,
type: 'P12',
purpose: 'MAINTENANCE'
}, {Authorization: token})
Related
I am creating a Firefox extension which posts some data to a database.
I made all parts in a modular fashion and am now combining everything piece by piece.
As such I know that my code to POST data to the database works.
Now here is the part that stumps me :
When I then add this code to my firefox extension
I get the following error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3003/timed_shot_create. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 400.
Now ofcourse CORS was nothing new and to be expected when dealing with Cross Origin Resource Sharing, it is even in the name.
But the reason why I am here is because this pertains only to the response of the POST request. The request itself is fine and allowed with the following piece of config in the server:
app.use(
cors({
//todo change to proper origin when live
origin: "moz-extension://d07f1e99-96a0-4934-8ff4-1ce222c06d0d",
method: ["GET", "POST"],
})
);
Which was later changed to:
app.use(
cors({
origin: "*",
method: ["GET", "POST"],
})
);
And then simplified even more to:
app.use(cors())
This is in Nodejs btw using cors middleware.
But none of this seems to work when it is used inside a firefox extension, as a local client page works as intended but as soon as I add this to a firefox extension I get a CORS error specifically pertaining to the reponse message.
The client side post (in the background script of the extension) is:
async function postTimedShot(post_options) {
const response = await fetch(post_endpoint, post_options);
//console.log(response);
const json_response = await response.json();
console.log(json_response);
}
let post_options = {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(response_data),
};
postTimedShot(post_options);
And the api looks like this:
app.post("/timed_shot_create", (req, res) => {
console.log("Received POST request");
const data = req.body;
console.log(data);
const timeStamp = data.time_stamp;
//TODO add screenshot and Description text maybe??
//const lastName = data.last_name
const queryString =
"INSERT INTO " + timed_shots_database + " (time_stamp) VALUES (?)";
getConnection().query(queryString, [timeStamp], (err, results, fields) => {
if (err) {
console.log("Failed to insert new user: " + err);
res.sendStatus(500);
return;
}
//Todo change this message when adding more data in body
//res.header("Access-Control-Allow-Origin", "moz-extension://d07f1e99-96a0-4934-8ff4-1ce222c06d0d");
res.json({
status: "Success!!!",
time_stamp: timeStamp,
});
console.log("Inserted a new user with id: ", results.insertId);
});
});
Furthermore, this extension is only for personal use and will work with a local server under my complete control so complications due to security or cloud usage that people want to mention are appreciated but not necessary (I think, I am a bit of novice).
I will be happy to clarify anything that is unclear, or change this post if necessary, but I think it is a unique question as far as I could see on SO. Additionally if I need to provide more of the codebase I will.
I will also update this post if I find out more about this problem.
Thank you for reading :3.
After reading about this post https://stackoverflow.com/a/53025865/5055963
on SO I found out that it had to do with the permissions in the manifest of the extension.
Adding this line: "://.localhost/*".
Solved the issue for me.
I am new to cypress.
Problem: I am not able to intercept url for API mocking, when there are multiple APIs are appearing in console-> network tab
Description: My requirement is as follows:
login a website, after getting the landing page,go to a particular webpage, select multiple test cases check boxes
open console-> network tab , and click run
watch multiple APIs are coming
I selected one API url among them. I want to mock this particular one.
'GET'method , url (say: https://externalAPIurl) are copied in the following code
//verify landing page is reached
cy.contains("this is landing page").should("exist");
//after login open testcase page
cy.visit(
"https://example.com/testcases"
);
//go to test suite tab test suite
cy.get("#testsuiteid")
.click();
//click test suite name
cy.contains("testsuitename").click();
// select all test cases
cy.get(".testcasecheckbox")
.click();
cy.intercept(
{
method: "GET",
url: "https://externalAPIurl",
},
{
headers: {
authorization:
"AABBXXYY",
},
},
{
statusCode: 200,
body: [
{
status: 200,
result: true,
combination: [
//same data...
],
},
],
}
);
cy.get("#run_button").click();
});
Where am I wrong?
I checked in postman, the URL, with Get method and Header-> Authorization key with proper Authorization key value (as collected from network console Headers) giving correct response, but the cy.intercept is throwing error
How to solve this?
Whenever in a website we click a button, multiple external API s are visible in console-> network. If I take any one of them -> check the URL, method, header and getting the same response in postman as in the network console, I should be able to mock the same request URL.
I tried the same when one single API is appearing in network console. It was fine. But when I select one among multiple the result is an error.
Please note: I have included the header authorization, may be the format is wrong. But if I give or do not give the authorization, the result is the same error.
If you want to intercept a 'GET' and stub the response with predefined data. I would first use dev tools network tab to capture the api response you want. Copy the response and save as a json file in your fixture folder (you can edit this file as you see fit to fake the data how you wish). From there you can do the following:
cy.fixture('apiResponse.json').as('fixture data')
.then( (data) =>{
const raw = JSON.stringify(data)
cy.request( {
method : 'GET',
url : 'api url here',
headers : {
authorization : 'AABBXXYY',
},
body : raw
})
.then( (response) => {
cy.log(response.body)
expect(`Response.status = ${response.status}`).to.eq('Response.status = 200')
})
})
I have been stuck for days on this and looked through many articles, but can not find a script that can help me.
The basis of the script is to automatically get authorization token, before i use a POST method.
As said before when getting a access token for this particular api the grant type is Client Crentials and the following fields are needed when manually getting the token :-
Token Name, Grant Type, Access Token URL, Client ID, Client Secrect, Scope and Client Authentication.
Is there a simple script that i can do this for me before actually doing the POST as it tiresome manually getting the token.
Thanks in advance with any help.
Kind Regards
Just an update i have found a way of actually getting the token now , so if you do the following.
Add a new request
Select 'Post'
Enter the api url
Click 'Body'
Click 'x-www-form-urlencoded'
I entered the following 'Keys'(enter your own corresponding 'values') - 'client_id', 'client_secret', 'scope' and 'grant type'
Click 'Send'
This will get you your token, i now need to find a way to either extract the token in a new request or find a way of putting this in the pre-request scripts, so I am able to enter the data need as 'raw' JSON.
Again if anyone can help, would appreciate it.
Kind Regards
Would this be any help to you? Or at least get you closer to what you need?
If you add this script to the Collection level pre-request script it will get the token and set this as the jwt variable. You can use this variable in the Headers for the main requests, using the {{jwt}} syntax - This script also gets the expiry_in value from the token response and sets this as a variable.
On each request in the collection, it will run the script and check to see if you have the AccessTokenExpiry and jwt properties in the environment file, it also checks to see if the token has expired. If any of those statements are true, it will get another token for you. If those are ok, it will use what you have set.
const moment = require('moment')
const getJWT = {
url: `<your token base path>/Auth/connect/token`,
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: {
mode: 'urlencoded',
urlencoded: [
{key: 'grant_type', value: 'client_credentials'},
{key: 'scope', value: '<scope details>'}
{key: 'client_id', value: 'your creds'}
{key: 'client_secret', value: 'your creds'}
]
}
}
var getToken = true
if (!_.has(pm.environment.toObject(), 'AccessTokenExpiry')
|| !_.has(pm.environment.toObject(), 'jwt')
|| pm.environment.get('AccessTokenExpiry') <= moment().valueOf()) {
} else {
getToken = false
}
if (getToken) {
pm.sendRequest(getJWT, (err, res) => {
if (err === null) {
pm.environment.set('jwt', `Bearer ${res.json().access_token}`)
var expiryDate = moment().add(res.json().expires_in, 's').valueOf()
pm.environment.set('AccessTokenExpiry', expiryDate)
}
})
}
To access the Collection level elements, if you hover over the collection name and click the ... icon, this will display a list of menu options. Select edit.
My node app is supposed to POST to an external server, so I'm playing with request from NPM. I want to verify it's working, but I'm not entirely sure I'm doing that right.
I've tried both of these methods
request({
url: url,
method: 'POST',
form: { a: 1}
}
request({
url: url,
method: 'POST',
json: true,
body: { a: 1}
}
In my test when I hit my own server, req.body shows the right object when I do json true. However that just means I'm passing a JSON header. The API I actually need to hit is expecting a normal POST, not JSON.
So when I try to verify that request is working right when I use form, my server says req.body is an empty object.
EDIT
I am posting to external API fine using form, but on my own server, express is leaving request.body as empty object.
See if this works for you:
request.post('http://service.com/upload').form({key:'value'})
I'm trying to upload images through angularjs (client side) and Nodejs express (server side). I perfer not to use forms because my company does not work with it.
this is part of my controller-
$scope.uploadPhotoToServer = function () {
console.log('will upload to album ' + this.albumName + ' file ' + this.userPhoto);
var fd = new FormData();
//Take the first selected file
fd.append("file", this.userPhoto);
fd.append("album", this.albumName);
$http.post('/upload', fd, {
withCredentials: true,
headers: {'Content-Type': undefined },
transformRequest: angular.identity
});
}]);
I wish if you could explain to me how this works and how I could continue
Thanks in advance :)
I'm not sure what you want to know, or what part you don't understand, but this basically just creates a $scope member function that adds the userPhoto and albumName to the FormData object (fd), which represents the form.The function then sends that object to the server using $http. You can think of the $http as a typical ajax command that just sends data to the server. (It actually uses the same XMLhttpRequest object that ajax does.
if you need it, here is a reference to the FormData() being used:
https://developer.mozilla.org/en-US/docs/Web/API/FormData