Computer Permissions issue with React Native, Expo, Axios - react-native

Inside React Native with Axios I'm making a request using axios to a remote url. I keep getting this error if I try to make the request.
The file “Macintosh HD” couldn’t be opened because you don’t have permission to view it.
Here's some of my code:
// inside componentDidLoad()
ExampleService.index().then(response => {
console.log('service response: ',response);
})
// in side ExampleService.js
function index() {
return client({
url: `/`,
method: 'GET'
});
}
// inside client
const client = axios.create({
baseUrl: 'http://192.168.42.64:3000',
headers: {
// 'Authorization': authHeader,
'Content-Type': 'application/json'
}
});

Related

How to pass header in Axios post request

Here is my code:
const data = {
listing: listing,
};
await axios.post('https://app.jghfjgf.com/m/api/helper/helper', qs.stringify(data) ,{
headers:{
'Cookie':cookie,
'content-type': 'application/x-www-form-urlencoded'
}}
).then(response =>{
console.log(response);
alert(response.data);
}).catch(error => {
console.log(error);
alert(error);
});
I am trying to make HTTP request using Axios library and I tried most of the suggestions available on the web. I don't know what mistake I am doing. I am new to React Native application so don't have enough practice with Axios.
Note: The issue is value "cookie" in header is not passing along with the API so I am facing error.

Vuex state returns no response on page reload

I have a Vuex Authentication that stores the state of signed-in user data. It works okay during sign in but if I reload the page after signing in the mutation payload returns no data because for some reason the axios request URI changes, it removes the /api after reloading the page not sure why.
You must save a token sent from the server to do this
To do this, when the server sends you a token, you must save it in the localstorage in your browser.
like this code in mutations method:
login(state, payload) {
axios({
headers: {
'Content-Type': 'application/json'
},
method: 'POST',
url: 'http://127.0.0.1:8000/api/user/login',
data: payload
}).then((response) => {
if (response.data.token) {
state.user_token = response.data.token;
localStorage.setItem('user_token', state.user_token)
}
}).catch((error) => {
console.log(error)
});
}

How to solve Cannot read property 'defaults' of undefined in vue?

I am setting default headers in my vue application, but when I load the app it show me error.
main.js?56d7:14 Uncaught TypeError: Cannot read property 'defaults' of undefined
Code
const token = sessionStorage.getItem("token");
if (token) {
Vue.prototype.$http.defaults.header.common["Authorization"] = token;
}
I made a working codepen based on your issue.
In your case, you need to create axios client.
Please check this codepen. https://codepen.io/endmaster0809/pen/VwaPGzr
let apiClient = axios.create({
baseURL: "https://jsonplaceholder.typicode.com",
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
}
})
const token = "testtoken";
if (token) {
apiClient.defaults.headers.common["Authorization"] = token;
}
Vue.prototype.$http = apiClient;

Post to /upload from react native

I'm trying to upload a picture to strapi from react native.
async function uploadPicture(uri) {
var data = new FormData();
data.append('files', {
uri: uri.replace('file://', ''),
name: uri,
type: 'image/jpg'
});
// Create the config object for the POST
// You typically have an OAuth2 token that you use for authentication
const config = {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'multipart/form-data;'
},
body: data
};
const fetchPromise = fetch('http://<host>:1337/upload', config)
console.log(fetchPromise)
return await fetchPromise
}
I get a 200 status code but no new picture is listed on the uploads page.
Oh! I figured it out using simple-http-upload-server to test the uploads. The problem was that I was setting the name of the file to be the uri. This would probably cause an error on strapi when creating the file on the server folder. It should return an error code nonetheless.

React Native fetch() Network Request Failed for android?

When I create a brand new project using react-native init (RN version 0.52-RC) and put a fetch in the render method to the public API, it throws a Network Request Failed. There is a very useless stack trace and I can't debug network requests in the chrome console. Here is the fetch I'm sending:
fetch('https://test.online/login', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: this.emailId,
password: this.password
})
}).then((data) => {
return data.json();
}).then((data) => {
}).catch((err) => {
alert(err); // TypeError:Network request faild.
});
if you are using nginx server then change
from ssl_ecdh_curve secp384r1 to ssl_ecdh_curve prime256v1
in this /etc/nginx/snippets/ssl-params.conf file
see detail to check here https://community.letsencrypt.org/t/warning-android-7-0-clients-not-browsers-can-only-use-curve-prime256v1/23212
can you post your request code snippet? what simulator are you using Android or IOS? Generally, IOS/Android doesn't allow you to make http requests by default you have to enable them in your info.plist( for IOS )