I'm been working in a project to test Graphql and is working fine in the server, but I can not connect my React Native app to the "API" server that is configured in Heroku with Django + Postgress + Graphene. You can test it here: https://hosting-api.herokuapp.com/graphiql
I choose Apollo for the React Native app to manage the connection following this example: http://dev.apollodata.com/react/simple-example.html
The app works ok with the default URL: http://api.githunt.com/graphql but when I change to my server I got the error in the image. 403 is the code for forbidden, but I have already added '*' to the allowed_hosts and cors_origin_whitelist. Also, when I change to another URL, e.g. my blog, it returns a 200 error which is ok because I don't have Graphql configured there but at least the app can make a connection.
Any ideas or suggestions?
Try to check django log, in my case trouble was with CSRF token.
And fix looks like:
urls.py
from django.views.decorators.csrf import csrf_exempt
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^graphql', csrf_exempt(GraphQLView.as_view(graphiql=True))),
]
Related
Fail to load resource: server 503(service unavailable)
First thing, I am not sure whether I had set up the port correctly. My React frontend is running on localhost:3000 while my Express backend is running on localhost:3001
This is my .env file.
enter image description here
This is my server.js.
enter image description here
On the frontend side, whenever doing a HTTP request, I use Axios, the endpoint url is "http://localhost:3001/app/Member", something like that. I already had a MongoDB Atlas connected with the app, it is working perfectly on localhost:3001, but I have problem trying to deploy it to Heroku. Some people said there is connection problem between MongoDB Atlas and Heroku, they suggest using the MongoDB sandbox in Heroku to solve this problem, but I already have the database with all the data that I want to used with the app, is there any way that I can import the data from my database to the MongoDB sandbox?
I tried to use "heroku local" to test whether is working, the app is running on localhost:5000, I can see my signup and login page, but I am not able to signup or login with a user email and password like I did perfectly on development mode localhost:3000.
I deployed it to heroku live, it gave me a server 503 error(service unavailable). I logged out the error.enter image description here
Here is my configuration:
SERVER
Laravel 8 application that uses Sanctum to provide access to REST API. It is configured to run on http://b8/
CLIENT
A separate Vue CLI 3.0 SPA that connects to the API using session-based cookie authentication method. I have configured Vue CLI Serve to run it at http://app.b8/.
PROBLEM
Chrome does not allow Set-Cookie operation even when both server and client are on the same domain. After going through several posts and articles, I have successfully run it in Postman, but the real Vue application that runs in the browser can't set Sanctum cookie and thus cannot login.
Here is my configuration:
.env
SESSION_DRIVER=cookie
SESSION_DOMAIN=.b8
SANCTUM_STATEFUL_DOMAINS=localhost,localhost:8080,127.0.0.1,127.0.0.1:8000,::1,b8,app.b8,app.b8:8080
vue.config.js
...
devServer: {
proxy: "http://b8/api/v1",
host: "app.b8"
},
Login function in Vue application
async login(context, credentials) {
axios.get('http://b8/sanctum/csrf-cookie').then(response => {
axios.post('http://b8/login', credentials).then(response2 => {
//successfully logged in.
});
});
},
Error msg
The outer call for /sanctum/csrf-cookie route returns successfully and brings Sanctum cookie. However, Chrome thinks that the cookie is invalid for the current domain and therefore doesn't set it. Here is the Dev Tools pane's Cookies tab after the Sanctum token call returns (tooltip showing Chrome's complaint):
Since the cookie is not set, the following login call fails with a 419 error.
What am I missing here?
Finally got it working. For any future reader, here are the things:
The first mistake that I was doing was to use a single word host name. It looks like Chrome (or Sanctum, not sure) wants you to have at least one period in the host name. So I changed it from b8 to b8.cod.
You should keep same_site attribute set to lax. none is a rather dangerous value. Chrome now shows none as a potential issue.
SESSION_DOMAIN should be set to .b8.cod with a leading period to support front-end subdomain, as correctly suggested by the documentation.
All other things should be done as suggested in the question. axios must use withCredentials set to true.
I've recently set up the exact same thing (Laravel 8 backend with Sanctum + separate Vue Frontend) and it's working.
Your server side setup looks good. Please double-check that the frontend's IP is actually included in your SANCTUM_STATEFUL_DOMAINS - that caused the 419 error for me sometimes.
On the Vue side, make sure to that you enable the withCredentials in your axios instance, e.g.
const baseDomain = "http://localhost"
const baseURL = `${baseDomain}/api`
export default axios.create({
baseURL,
withCredentials: true,
})
If the provided suggestion does not help, I can further extend my answer by showing you more of my working backend code.
i'm a learning nuxt js and laravel, I have been doing an api with laravel and the front with nuxt js, when i work on localhost everything works fine but when i upload my api to a remote server the error appears on my nuxt app {"error":"Token is no provided"} this only happens when the api is on the remote server
my nuxt config looks like this
everything works fine on localhost, but not on the remote server, and on the internet I hardly find any information about it, thanks
in my laravel authController i have this
I deployed a nuxt app to heroku and when I am running it locally, the app is working fine. On the other hand in production the login / register is not working it is always says 400 bad request (there is no explaination why it is a bad request) or 401 unauthorized.
When I am running the up locally, I am pointing to the backend api and it is working fine.
But when it is run in heroku, I get the errors (400 and sometimes 401), oddly it's worked like there random times from different devices but when I logged out and retry create a user errors.
I did not change the code.
I am not sure the problem is with my code or heroku or maybe Pythonanywhere which I am using to host my backend.
It is my first time deploy python DRF as backend and nuxt as front.
My backend is in python DRF.
My front-end nuxt repo nuxt repo
My DRF code backend repo.
In the nuxt app you can see register component with function onSubmit which should register the user and then log him in.
And DRF there is an app name users_auth which has the user model as CustomUser and the Todo model.
nuxt.config.js points to the same place locally and in production.
I'm having problems authenticating through Google OAuth api on a website hosted on Heroku.
Everything works in my localhost.
This is my configuration on google dev console.
It works on localhost.
It doesn’t work online. This is the error I got.
I've tried using http as suggested in some old thread on stack overflow, but it didn't work.
I've tried changing the allowed redirect url in the google console to include also the port, and in that case it worked.
The problem is that I don't know which port Heroku is going to use every time the server restart.
Do you know any workaround to a such situation?
Well, at the end I didn't figure out how to configure properly Google... so what I did (and it worked) was to remove the port from the return url:
const strategyConfig = {
clientID: GOOGLE_CLIENT_ID,
clientSecret: GOOGLE_SECRET_ID,
callbackURL: process.env.NODE_ENV === "production"
? `${HOST}/${RETURN_URL}`
: `${HOST}:${PORT}/${RETURN_URL}`,
passReqToCallback: true,
};