上下文： 因此，我正在为非营利组织创建一个 Web 应用程序。这个项目始于学校，我想使用一些"新"技术。
我选择创建多个服务并通过 docker-compose 管理它们。 我主要有这些服务：
- 带有 django-rest-framework 的后端 API
- 带有 vuejs 的前端
- 使用 nginx 反向代理
一切正常，我接近项目结束。所以我想在测试环境中测试我的架构。问题是我是一个关于部署的大菜鸟，我可能采取了错误的选择。
我的想法是：非营利组织没有很多钱，所以我试图测试最便宜的解决方案之一：租用虚拟机，克隆我的项目并在机器docker-compose上运行。
我遇到的问题是我的所有请求(除了一些 CSS 的 GET(在此环境中不起作用。我有这个问题：
- 当我到达我的主页并尝试从我的nginx获取一些图像时，我立即在控制台中收到以下消息：CORS请求被阻止：CORS请求未成功。 之后，如果
- 我想登录，而不是我的 POST 请求，Firefox 中的网络选项卡显示只有一个选项正在发送，但没有任何答案。
我想 CORS 或类似的东西有问题，但由于一切都在 docker 中运行，我未能找到错误和修复程序。我真的不明白这里出了什么问题。这真的是CORS问题吗？它是否链接到 docker-compose 或环境，因为它在我的电脑上完美运行？
谁能帮我？
这是我的码头工人撰写文件：
version: '3.7'
services:
db:
container_name: db
image: postgres
networks:
- main
ports:
- "5432:5432"
volumes:
- pg-data:/var/lib/postgresql/data
redis:
container_name: redis
image: redis:alpine
networks:
- main
celery:
container_name: celery
build: ./backend
command: bash -c 'celery worker --app=backend.celery:app --loglevel=info'
volumes:
- ./backend:/code
depends_on:
- db
- redis
networks:
- main
nginx:
restart: always
container_name: nginx
build:
context: .
dockerfile: nginx/prod/Dockerfile
ports:
- "80:80"
depends_on:
- backend
volumes:
- ./nginx/prod/prod.conf:/etc/nginx/nginx.conf:ro
- django-static:/usr/src/app/static
- django-media:/usr/src/app/media
networks:
- main
backend:
container_name: backend
build: ./backend
command: /start_prod.sh
volumes:
- .:/code
- django-static:/backend/static
- django-media:/backend/media
ports:
- "8000:8000"
networks:
- main
depends_on:
- db
volumes:
pg-data:
django-static:
django-media:
networks:
main:
driver: bridge
这是我的nginx共识：
user nginx;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
client_max_body_size 100m;
upstream backend {
server backend:8000;
}
server {
listen 80;
charset utf-8;
root /dist/;
index index.html;
# frontend
location / {
try_files $uri $uri/ @rewrites;
}
location @rewrites {
rewrite ^(.+)$ /index.html last;
}
# backend urls
location ~ ^/(admin|api|auth) {
proxy_redirect off;
proxy_pass http://backend;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
}
# static files
location /static {
autoindex on;
alias /usr/src/app/static;
}
# media files
location /media {
autoindex on;
alias /usr/src/app/media;
}
}
}
老实说，由于我还没有太多经验，所以我关注了很多这个项目：https://verbose-equals-true.gitlab.io/django-postgres-vue-gitlab-ecs/但是我想要一些不同的东西，所以我只遵循了第一个指南并调整了以下内容。
我已经尝试使用 django-cors-headers 或在 nginx conf 中添加 CORS 支持，如以下帖子建议：
- https://serverfault.com/questions/162429/how-do-i-add-access-control-allow-origin-in-nginx
- https://gist.github.com/Stanback/7145487 但它并没有解决我的解决方案。
如果有人对如何以更好的方式部署或/以及如何改进我的架构有答案或/和建议，请给我写评论。
它是否链接到 docker-compose 或环境，因为它在我的 PC 上完美运行？
我猜，您在前端使用的主机名/IP 是错误的。听起来您正在使用localhost也称为 IPv4127.0.0.1或 IPv6::1将请求发送到测试部署后端。
我的猜测是否正确：我建议在启动脚本中使用环境变量或在单独的配置中指定环境。否则，您只需为每个请求更改代码中的主机名/IP。 无论如何，您必须在测试环境中使用主机名/IP。