Nginx 部署 Angular 前端未连接到 DRF 后端

Posted 2023-02-24

【中文标题】Nginx 部署 Angular 前端未连接到 DRF 后端

【英文标题】：Nginx Deployed Anguler Frontned Does not Connect to DRF backend

【发布时间】：2020-12-25 03:26:25

【问题描述】：

我已经在同一个 aws 实例中部署了 drf 后端和 angular 前端，我使用 nginx 和 gunicron 来部署 drf 和 Nginx 来部署 angular。我使用邮递员测试了drf API，它工作正常，但角度前端没有连接到API，站点工作但它无法连接到后端API。它显示

CORS 策略已阻止从源“http://3.129.126.13”访问“http://3.129.126.13:8080/api/products?search=asus&page=1”处的 XMLHttpRequest：否“访问-请求的资源上存在 Control-Allow-Origin' 标头。

我已在 python 应用设置中将前端地址列入白名单。

前端托管在 80，后端托管在 8080。

后端服务器块：

server 
    listen 8080;
    server_name 0.0.0.0;

    location = /favicon.ico  access_log off; log_not_found off; 

    location /static/ 
            root /home/ubuntu/Sheradam_backend;
    

    location / 
            include proxy_params;
            proxy_pass http://unix:/home/ubuntu/Sheradam_backend/Sheradam_backend.sock;

    

前端的服务器块

server 
    listen 80;
    listen [::]:80;
    server_name Sheradambd.com;
    root /home/ubuntu/Sheradam_frontend/dist/SheraDam;
    server_tokens off;
    index index.html index.htm;

    location / 
        # First attempt to server request as file, then         
        # as directory, then fall back to displaying a 404.          
        try_files $uri $uri/ /index.html =404;
    

python 应用设置：

STATIC_URL = '/static/'

CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
    'http://3.129.126.13',
)

【问题讨论】：

解决方案在这里enable-cors.org/server_nginx.html

【参考方案1】：

解决方案在这里 enable-cors.org/server_nginx.html