I'm creating a react native app that transform audio to text.
First, a user records the audio. Then the recording is sent with RNFS.uploadFiles to flask API. This flask API I created to convert the audio file into text and send back the text to the user.
Honestly, I'm not sure how it really works. For example, I don't see the audio files that were sent from react native to flask server. They are not saved in my server (or they are?)
Should I encrypt the recordings before they are sent?
I send audio with this function:
RNFS.uploadFiles({
toUrl: uploadUrl,
files: fileToSend,
method: 'POST',
headers: {
'Accept': 'application/json',
}
}).promise.then((response) => {
setResults(response.body)
})
.catch((err) => {
console.log(err)
});
}
}
To see the audio files sent from your application to the Flask server, you can use an HTTP Debugging tool such as Charles Proxy or Fiddler. This will show you the HTTP requests exchanged.
If your Flask server has SSL enabled (HTTPS) and your React Native is connecting through HTTPS, then the communication is already encrypted.
Related
I have a nextjs webapp with serverless functions that run behind ssl certificates, I want to treat the nextjs webapp as an interface to a hasura graphql query and subscription API that is not running with ssl.
I figure nextjs serverless functions would be a good way to go, I have already used it to forward requests like so: http.get('http://yoururl.com', response => response.pipe(res)).
However I can't work out a way to do this for post/subscriptions, there's a http.request function but that doesn't support body params and I'm even less sure about forwarding websocket connections.
I tried to just forward the request as a fetch but had issues with the header mismatching:
export default async (req: NextApiRequest, res: NextApiResponse) => {
return fetch({
method: 'POST',
url: 'http://myurl.com/v1/graphql',
headers: req.headers,
body: req.body
})
}
I'm currently trying to send a VOIP notification to iOS devices (to indicate an incoming call) directly from a React Native app using Fetch API. When I use the equivalent curl command (using both APNs certificates) from the command line, all VOIP notifications are received correctly. Is there a way to use APNs certificates with Fetch, or do I have to use Firebase Cloud Messaging (FCM) or another service?
if (Platform.OS === 'ios') {
await fetch("https://api.push.apple.com/3/device/{device token}", {
body: JSON.stringify({
aps:{alert:"Notification"},
uuid:message_uuid,
callerName:recipientUser.fullName,
handle:recipientUser.email}),
headers: {
"Apns-Push-Type": "voip",
"Apns-Topic": "my.app.name.voip",
"Content-Type": "application/x-www-form-urlencoded"
},
method: "POST"
});
}
when I run the following code from the client side in javascript as the coinbase cloud documentation says https://docs.cloud.coinbase.com/exchange/reference/exchangerestapi_getcoinbaseaccounts
const options = {
method: 'GET',
headers: {
Accept: 'application/json',
'cb-access-key': 'Apikey',
'cb-access-passphrase': 'Mypassphrase',
'cb-access-sign': cb_access_sign,
'cb-access-timestamp': cb_access_timestamp
}
};
fetch('https://api.exchange.coinbase.com/coinbase-accounts', options)
.then(response => response.json())
.then(response => console.log(response))
.catch(err => console.error(err));
when I do it with axios the same thing happens
the following error appears in console: "Access to fetch at 'https://api.exchange.coinbase.com/coinbase-accounts' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field cb-access-passphrase is not allowed by Access-Control-Allow-Headers in preflight response."
what am I doing wrong?
You can't do this in the browser, you need to do it from the web server. You can either display the data when the page loads or use vue/react and write your own interaction with the webserver.
edit: doing this in the browser makes your keys visible...
Coinbase API has misconfigured CORS (or intentionally require you to make API calls from a server). Regardless, this makes it very hard to test in a dev environment. This can be solved using a proxy. This can be configured using cors-anywhere which changes the api call flow from:
Client (localhost:3000) <-> Coinbase API (api.exchange.coinbase.com)
to
Client (localhost:3000) <-> Proxy Server (www.your-proxy-server.com) <-> Coinbase API (api.exchange.coinbase.com)
In summary, coinbase will only see a request coming from your proxy server and does not care/know where the proxy server sends back the data. Cors-anywhere will also include the headers and data along with the request.
Do not use public cor-anywhere servers unless you are quickly testing something. It is best to set up your own.
Using Firebase
I used cors-server to set mine up using firebase functions. You want your Firebase functions to look like the following:
const {onRequest} = require("firebase-functions/v2/https");
const corsAnywhere = require('cors-anywhere');
const cors = require("cors")({origin:true})
const corsServer = corsAnywhere.createServer({
originWhitelist: [
'http://localhost:3000',
],
requireHeader: ['origin', 'x-requested-with'],
removeHeaders: ['cookie', 'cookie2'],
});
exports.proxy = onRequest((request, response) => {
cors(request,response,() =>{
corsServer.emit('request', request, response);
})
});
and an example of a request in your client code
return(
axios({
url: `https://proxy-your-function-id.a.run.app/https://api.exchange.coinbase.com/profiles`,
headers: await getHeaders(options),
method: 'GET',
data: options.body
}).then((response)=>{
return(response)
}).catch((err)=>{
return(err.response)
})
)
Edit: It should also be noted that Coinbase is getting rid of Coinbase Pro and its API end of 2022. Coinbase exchange and its API will still be available at https://api.exchange.coinbase.com however Pro users will be merged into Advanced Trading on their main platform which uses oAuth to link the API (or standard keys for personal projects).
I have a running Vue.js application that request to the server.
My client-side application is running on e.g. cms.abc.com and the server in ApiGee running on this dns server.abc.com
The request code using axios is
const headers = {
'x-api-key': 'xxxxx123123'
}
return axios({
method: get,
url: 'server.abc.com/items',
headers: headers
}).then(response => {
console.log(respnose.data)
})
When I check the browser network I'm getting status 401 Unauthorized during OPTIONS request.
The APIgee CORS has been enabled, but when I check the logs from the ApiGee the value for x-api-key is missing.
I'm also not sure why my client side application is still sending OPTIONS request. I'm expecting that it should skip the CORS since the client and the server are having the same origin. which is abc.com
So i have a react app which if someone is logged in will check for it's account level and based on that will enable or disable features. It worked until it was all localhost, but now i have a server in the cloud and the request is pending forever. Other requests to the same endpoint works fine. I tried changing the address to localhost, but then it looks for the API server on my PC. It's strange because the same endpoint works with other requests. This single request also works on localhost but not if i use server's IP. Here's an image of the Network page of Chrome development tools: https://i.ibb.co/c2r8Js1/Screenshot-at-2019-12-27-15-11-41.png
getLoggedLevel = () => {
var URL = process.env.REACT_APP_API_URL;
var URL2 = 'http://localhost:8000/requests'
axios({
url: URL,
method: 'post',
data: {
message: 'getLoggedLevel',
username: JSON.parse(localStorage.getItem('loggedUser')).username
}
}).then(res => {
this.setState({loggedLevel: res.data.level})
})
}
Edit: I created a separate endpoint for that single request, and it's 404 however in firefox it's 200 for OPTIONS... Now i'm really confused :(