前端与后端未进行通信。

huangapple go评论75阅读模式
英文:

Frontend not communicating with Backend

问题

I see you've provided a lot of information about your web application project. If you have any specific questions or need assistance with a particular part of your code or project, please let me know, and I'll do my best to help you with the translation.

英文:

I've got my final year web application project from someone who developed it from me, the front end is in react and backend is in python django with database sqlite. According to him the project is complete and error free and requires no changes to be made as he tested it thoroughly, now for some reasons i dont have his contact or whereabouts so i cant really contact him. I've exhausted all my options but my front end refuses to communicate with backend. Homepage loads fine. but it wont redirect to any other page, it just refreshes to homepage again, if i try to sign in it will always say invalid email or password. if i try to sign up it just refreshes back to homepage after hitting submit. I've done everything from ensuring cors relation, to running production builds, to ensuring urls.py is as it should be. It just wont work. I npm run build my front end and then copy build folder to my backend root directory. then i npm start my front end and py manage.py runserver my backend at the same time, they both compile without any errors and exceptions, my frontend also opens my homepage, my backend also open my homepage on seperate localhosts, backends localhost/admin and other pages of django works fine, but for some reasons i just cant make my front end functional. i'm so exhausted and so concerned because i have to submit my project in 2 days time. i've exhausted my options with chat GPT. i would be very thankful for your help.
Here's the link to my backend https://github.com/choudhrydaniyal/BackEnd

And here's link to my frontend https://github.com/choudhrydaniyal/FrontEnd

This is the code of my settings.py file(only the relevant code).

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework_simplejwt',
    'api',
    'rest_framework',
    'djoser',
    'corsheaders',
    'backend',
    'rest_framework_simplejwt.token_blacklist',
]

CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000',
    'http://localhost:8000',
    'http://127.0.0.1:8000',
    'http://localhost:8080',
    'http://127.0.0.1:3000',
    'https://fakenewsdetectionteam.herokuapp.com',
]

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'build/static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
DOMAIN = ('localhost:3000/#')

And this is the code of my urls.py file.

urlpatterns = [
    path('admin/', admin.site.urls),
    path('auth/', include('djoser.urls')),
    path('auth/', include('djoser.urls.jwt')),
    path('auth/', include('djoser.social.urls')),
    path('news/',views.Postdata.as_view()),
    path('news/<int:id>',views.Postdata.as_view()),
    path('list',views.get_trends.as_view()),
    path('profile',views.get_profile.as_view()),
    path('postprofile',views.ProfileViewSet.as_view()),
]

urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
urlpatterns += [re_path(r'^.*', TemplateView.as_view(template_name='index.html'))]

答案1

得分: 1

  1. 检查您浏览器开发者工具中的网络标签,查看是否有任何请求失败或返回错误。这可以帮助您识别未正常工作的特定API请求。

  2. 尝试在不同端口上运行前端和后端,并相应地更新前端代码中的API网址。这可以帮助隔离与CORS或端口冲突相关的任何问题。

  3. 检查您的后端日志,查看与传入请求相关的任何错误消息。这可以帮助您识别与身份验证或请求验证相关的问题。

  4. 尝试在同一域上运行前端和后端(例如,使用反向代理如nginx)。这可以帮助避免与CORS相关的任何问题。

  5. 检查是否有任何需要设置的环境变量,以使您的应用程序正常工作。例如,如果您的应用程序需要秘钥或数据库URL,请确保在您的环境中正确设置它们。

--如果以上方法都不起作用,请使用诸如Postman和Sentry之类的故障排除框架。

英文:
  1. Check the network tab in your browser's developer tools to see if any requests are failing or returning errors. This may help you identify specific API requests that are not working correctly.

  2. Try running the frontend and backend on different ports, and update the API URLs in your frontend code accordingly. This can help isolate any issues related to CORS or port conflicts.

  3. Check your backend logs for any error messages related to incoming requests. This may help you identify issues with authentication or request validation.

  4. Try running the frontend and backend on the same domain (e.g. by using a reverse proxy like nginx). This may help avoid any issues related to CORS.

  5. Check if there are any environment variables that need to be set for your application to work correctly. For example, if your application requires a secret key or database URL, make sure these are set correctly in your environment.
    --If these things does work use trouble shoot frame works like post man and Sentry

huangapple
  • 本文由 发表于 2023年5月14日 19:48:47
  • 转载请务必保留本文链接:https://go.coder-hub.com/76247322.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定