Netlify frontend can't fetch API from Heroku backend.
The Request URL adddress below is definitly not correct. How to make it correct?
In dev tool it shows this:
Request URL: http://localhost:5000/api/castles
package.json frontend:"proxy": "http://127.0.0.1:5000/",
This is the link of Netlify:
https://trusting-ride-8e237a.netlify.app/
Frontend code link :
https://github.com/ZhiJuanTang/Castle_Frontend
This is the link of Heroku:
https://castlebackend.herokuapp.com/api/castles
Backernd code link:
https://github.com/ZhiJuanTang/Castle_Backend
The frontend code relies on an environment variable to define the API endpoint:
const res = await fetch(`${process.env.REACT_APP_BLOG_API}/api/castles`);
Did you define REACT_APP_BLOG_API as an environment variable in Netlify? See Netlify Integration in the documentation.
Related
https://developers.google.com/youtube/v3/quickstart/nodejs?hl=en_US
after running the code I get the url below:
Authorize this app by visiting this url: https://accounts.google.com/o/oauth2/v2/auth?access...
Enter the code from that page here:
But after signing in I was brought to this link with no code.
http://localhost/?code=4/0ARtbsJoy4Qoio0JdBeaPpTAnuvJn9gKarNnLzF3cpK_RQ7DgP_oO-Q1QPpfOS5OO6JYgWw&scope=https://www.googleapis.com/auth/youtube.readonly
In your example the code you have to provide is just:
4/0ARtbsJoy4Qoio0JdBeaPpTAnuvJn9gKarNnLzF3cpK_RQ7DgP_oO-Q1QPpfOS5OO6JYgWw
(deduced from the URL you provided).
Hi i try connect my page in netlify with a service external but i dont now how configurate _redirects I put this:
/api/* http://www.webservice.com/:splat 200
And my app get webservice and put these url https://myapp.netlify.app/api/products
i want that put http://www.webservice.com/api/products
my _redirects is in public folder , my app is developer in react-hooks with webpack
plese someone cant help me,
Put the following in your netlify.toml file:
[[redirects]]
from = "/api/*"
to = "http://www.webservice.com/api/:splat"
status = 200
Then browse to https://myapp.netlify.app/api/products and it'll show you the page at http://www.webservice.com/api/products.
I have an application with Laravel and Vue.js for the separate folder which one is for the backend and another is the frontend and I have successfully configured all following the Laravel sanctum documentation and also protecting the route API and I am able to successfully log in and register but after successfully Login it's showing me "Unauthenticated " when I try to fetch the authenticated user. I am using localhost as a default. can anyone give me some suggestions
.env file I have also set it
SESSION_DRIVER=cookie
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:8000
Thanks
Unfortunately, I have found the solution
#localhost
SESSION_DRIVER=cookie
SANCTUM_STATEFUL_DOMAINS=localhost:8080,127.0.0.1:8080,localhost:3000,127.0.0.1:3000
SESSION_DOMAIN=localhost
localhost:8080 for frontend server the port might be changing sometimes like localhost:8081 localhost:3000 so make sure you put the correct URL
#Live Server
SANCTUM_STATEFUL_DOMAINS=*.yourdomain.com
SESSION_DOMAIN=.yourdomain.com
I have also figure out sometimes I was right but the Laravel cache gives me the wrong result so you have to clean the Laravel cache and also browser cache. you can follow the below code to make a route function in web.php
Route::get('/clear', function() {
Artisan::call('cache:clear');
Artisan::call('config:clear');
Artisan::call('config:cache');
Artisan::call('view:clear');
return "Cleared!";
});
Hope it will works
Thanks
I am starting a new project, Nuxt.js for the frontend and Laravel for the backend.
How can I connect the two?
I have installed a new Nuxt project using create-nuxt-app, and a new laravel project.
As far as I have searched, I figured I need some kind of environment variables.
In my nuxt project, I have added the dotenv package and placed a new .env file in the root of the nuxt project.
And added CORS to my laravel project, as I have been getting an error.
The variables inside are indeed accessible from the project, and im using them
like this:
APP_NAME=TestProjectName
API_URL=http://127.0.0.1:8000
And accessing it like this:
process.env.APP_NAME etc'
To make HTTP calls, I am using the official Axios module of nuxt.js, and to test it i used it in one of the components that came by default.
The backend:
Route::get('/', function () {
return "Hello from Laravel API";
});
and from inside the component:
console.log(process.env.API_URL)//Gives 127.0.0.1:8000
//But this gives undefined
this.$axios.$get(process.env.API_URL).then((response) => {
console.log(response);
});
}
What am I doing wrong here?
I have tried to describe my setup and problem as best as I can. If I overlooked something, please tell me and I will update my question. Thanks.
Taking for granted that visiting https://127.0.0.1:8000/ in your browser you get the expected response, lets see what might be wrong in the front end:
First you should make sure that axios module is initialized correctly. Your nuxt.config.js file should include the following
//inclusion of module
modules: [
'#nuxtjs/axios',
<other modules>,
],
//configuration of module
axios: {
baseURL: process.env.API_URL,
},
Keep in mind that depending on the component's lifecycle, your axios request may be occurring in the client side (after server side rendering), where the address 127.0.0.1 might be invalid. I would suggest that you avoid using 127.0.0.1 or localhost when defining api_uris, and prefer using your local network ip for local testing.
After configuring the axios module as above, you can make requests in your components using just relative api uris:
this.$axios.$get('/').then(response => {
console.log(response)
}).catch(err => {
console.error(err)
})
While testing if this works it is very helpful to open your browser's dev tools > network tab and check the state of the request. If you still don't get the response, the odds are that you'll have more info either from the catch section, or the request status from the dev tools.
Keep us updated!
Nuxt has a routing file stucture to make it easy to set up server side rendering but also to help with maintainability too. This can cause Laravel and Nuxt to fight over the routing, you will need to configure this to get it working correctly.
I'd suggest you use Laravel-Nuxt as a lot of these small problems are solved for you.
https://github.com/cretueusebiu/laravel-nuxt
Throughout the documentation for the new App Bridge, Shopify refers to the shopOrigin value and how it's used to configure the Provider from app-bridge-react but they never specify how to get this value?
The react app is loaded inside of an iframe and the src includes the shopOrigin value as a query string param called shop, but when I try the following code I get the error window is not defined:
const params = queryString.parse(window.location.search);
const config = {
apiKey: process.env.SHOPIFY_API_KEY,
shopOrigin: params.shop,
};
1) Why would I be getting window is not defined in javascript code running in a browser?! This makes no sense to me
2) If this value can be read from of the provided libraries such as #shopufy/app-bridge-react please tell me how
Unless you're using a library tailored specifically to Shopify, you have to manually save the shop origin during OAuth authorization.
Hopefully this Shopify tutorial is of some assistance
The shopOrigin is available within your browser cookies.
If you followed the Shopify development for react and Node.js, you should already saved this after the Shopify authentification.
I am not sure what exactly is the need for shopOrigin, if you just wanted to go to admin section of the shop from client side you can use Redirect in app bridge. otherwise you can store the shop detail on server during auth process and create a get api to retrive the details on client side as needed.