django项目nginx部署遇到502和跨域问题

Question

目前在用在ubuntu上用nginx和uwsgi部署django开发的api网站，本来已经存在一个网站，是增加一个网站的部署，另一个网站暂时不用管，遇到了如下问题
第一 当我用登陆django 自带的admin后台时会出现跨域问题，并且第一次输入网址访问速度非常慢，界面如下

第二 当我获得api返回的内容时候图片的地址会是以ip形式出现的
"img": "http://162.43.9.61:8081/media/img/recruit/recruit6444263d-d089-4260-bdd3-b85162123441.jpg%22,
第三当我访问测试api的时候 开始是域名显示，当我点击下一页的时候会变成ip+端口的形式
http://www.dongjingbang.com/api/recruit/lists/%E5%8F%98%E6%88%90http://162.43.9.61:8081/api/recruit/lists/?page=2
第四 uwsgi的配置文件我写的是 http = ip+端口号，设置成socket= ip+端口号nginx会报502 Bad Gateway错误
这问题困扰我很久，以下是我的相关配置文件
uwsgi

[uwsgi]
http= 1.2.3.4:8081
buffer-size = 65536
chdir = 路径
home = 路径
wsgi-file = project/wsgi.py
module = project.wsgi:application
listen=200
processes = 2
threads = 2

pidfile = uwsgi_project.pid
daemonize = uwsgi_project.log

master = true
vacuum = true
disable-logging = true

log-maxsize = 50000000

nginx /etc/nginx/sites-available/default.conf

```python
server {
    listen 80 default_server;
    server_name _;
    return 444; # 过滤其他域名的请求，返回444状态码
}
server {
    listen 80;
    server_name www.aaa.com; # www.aaa.com域名
    location / {
        proxy_pass http://1.2.3.4:8080; # 对应端口号8080
        #   指定允许跨域的方法，*代表所有
        add_header Access-Control-Allow-Methods *;

        #   预检命令的缓存，如果不缓存每次会发送两次请求
        add_header Access-Control-Max-Age 3600;
        #   带cookie请求需要加上这个字段，并设置为true
        add_header Access-Control-Allow-Credentials true;

        #   表示允许这个域跨域调用（客户端发送请求的域名和端口） 
        #   $http_origin动态获取请求客户端请求的域   不用*的原因是带cookie的请求不支持*号
        add_header Access-Control-Allow-Origin $http_origin;

        #   表示请求头的字段 动态获取
        add_header Access-Control-Allow-Headers
        $http_access_control_request_headers;

        #   OPTIONS预检命令，预检命令通过时才发送请求
        #   检查请求的类型是不是预检命令
        if ($request_method = OPTIONS){
            return 200;
        }
    }
     location /static {
         alias /project/static;
        }
}
server {
    listen 80;
    server_name www.bbb.com # www.bbb.com域名
    location /{
        proxy_pass http://1.2.3.4:8081; # 对应端口号8081
        # 添加以下跨域相关的头部信息
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

        # 预检命令的缓存，如果不缓存每次会发送两次请求
        add_header 'Access-Control-Max-Age' 3600;

        # 带cookie请求需要加上这个字段，并设置为true
        add_header 'Access-Control-Allow-Credentials' 'true';

        # 检查请求的类型是不是预检命令
        if ($request_method = OPTIONS) {
            add_header 'Access-Control-Allow-Origin' $http_origin;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Content-Length' 0;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            return 204;
        }
    }
        location /static {
        alias /project2/static;  # 静态文件目录
    }
    location /media {
        alias /project2/medias;  # 媒体文件目录
    }
}
        

报错日志和网页中显示
禁止访问 (403)
CSRF验证失败. 请求被中断.

Help
Reason given for failure:

Origin checking failed - http://www.project2.com does not match any trusted origins.

uwsgi日志(设置为http= 1.2.3.4:8081时候)nginx 无报错
WARNING 2023-08-26 18:07:55,863 log Forbidden (Origin checking failed - http://www.project2.com/ does not match any trusted origins.): /admin/login/

设置为socket= 1.2.3.4:8081时候
nginx日志
2023/08/26 18:16:05 [error] 7421#7421: *132 upstream prematurely closed connection while reading response header from upstream, client: 122.26.12.142, server: http://www.project2.com/, request: "GET /admin/ HTTP/1.1", upstream: "http://1.2.3.4:8081/admin/%22, host: "project2.com"
无uwsgi日志

settings相关设置

```python
MIDDLEWARE = [
   'corsheaders.middleware.CorsMiddleware',  # 跨域
    #'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
   # 'corsheaders.middleware.CorsMiddleware', 
    'django.middleware.common.CommonMiddleware',
   #'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
CSRF_COOKIE_NAME = 'csrftoken'

#SECURE_CROSS_ORIGIN_OPENER_POLICY = 'None'
CORS_ORIGIN_ALLOW_ALL = True

Answer 1

问题一：跨域问题
根据你提供的配置文件，你已经使用了django-cors-headers中间件来处理跨域请求。但是在配置文件中有两个位置都配置了该中间件，需要将其中一个注释掉，避免冲突。
请将下面这行代码注释掉：

'corsheaders.middleware.CorsMiddleware',

问题二：图片地址的IP形式
图片地址显示为IP形式，可能是因为你在API返回结果中使用了硬编码的IP地址。你可以通过在settings.py文件中设置MEDIA_URL和MEDIA_ROOT来解决这个问题。
在settings.py文件中添加以下配置：

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

然后在nginx配置文件中添加以下配置：

location /media/ {
    alias /project2/media/;  # 媒体文件目录的绝对路径
}

问题三：URL变成IP+端口形式
URL变成IP+端口形式可能是由于你在视图中使用了硬编码的URL。建议使用reverse函数或者get_absolute_url方法生成URL，在模板中使用{% url %}标签来生成URL。
问题四：uwsgi配置问题
根据你提供的uwsgi配置文件，似乎没有出现明显的问题。但是如果你想使用socket连接方式，需要在nginx配置文件中做相应修改。
将uwsgi配置文件中的http=1.2.3.4:8081改为socket=1.2.3.4:8081，然后在nginx配置文件的proxy_pass中使用socket连接：

location / {
    uwsgi_pass unix:/path/to/uwsgi/socket;
    include uwsgi_params;
}

请将/path/to/uwsgi/socket替换为uwsgi socket文件的路径。