Vue.js 如何使用docker compose通过nginx解除阻止我从我的js前端到我的api的请求？

背景： 因此，我正在为一个非营利组织创建一个web应用程序。这个项目始于学校，我想使用一些“新”技术

我选择创建几个服务，并通过docker compose管理它们。 我主要提供以下服务：

• 带有django rest框架的后端api
• 使用vuejs的前端
• 使用nginx的反向代理

一切都很顺利，我的项目快结束了。所以我想在测试环境中测试我的架构。问题是我是部署方面的大傻瓜，我可能会选择错误的选项

我的想法是：这个非营利组织没有很多钱，所以我试着测试一个最便宜的解决方案：租用一台虚拟机，克隆我的项目并在机器上运行docker compose

我遇到的问题是，我的所有请求（除了css的一些GET）都不能在这个环境中工作。我有一个问题：

• 当我到达我的主页并尝试从我的nginx获取一些图像时，我立即在控制台中收到以下消息：CORS请求被阻止：CORS请求未成功
• 如果我想登录，firefox中的“网络”选项卡会显示只有一个选项是“发送”，但没有任何答案，而不是我的POST请求

我想CORS或类似的东西可能有问题，但由于docker内部的一切都在运行，我没有找到错误和修复方法。我真的不明白这里出了什么问题。这真的是CORS的问题吗？它是否链接到docker compose或环境，因为它在我的电脑上运行良好

有人能帮我吗

这是我的docker撰写文件：

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;
    }
  }
}

老实说，虽然我还没有太多经验，但我在这个项目上做了很多工作： 但我想要一些不同的东西，所以我只遵循了最初的指南，并改编了以下内容

我已经尝试过使用django cors头文件，或者在nginx conf中添加cors支持，如下所示：

• 但这并没有解决我的问题

如果有人对如何更好地部署或/和如何改进我的体系结构有任何回答或/和建议，请给我写一篇评论

它是否链接到docker compose或环境，因为它在我的电脑上运行良好

我猜，您在前端使用的主机名/IP是错误的。听起来您正在使用

localhost

也称为IPv4

127.0.0.1

或IPv6

：：1

将请求发送到测试部署后端

我的猜测是否正确：我建议在开始脚本之外或在单独的配置中使用环境变量来指定环境。否则，您可以在代码中为每个请求更改主机名/IP。

---

无论如何，您必须在测试环境中使用主机名/IP。

您的

前端是
docker compose中的
服务还是
nginx服务中的
服务。我用它来服务静态文件。确切地说，我在请求中使用localhost。在这种情况下，我应该使用私有IP还是公共IP？我将测试这两个，但我不明白为什么它不能与localhost一起工作。我的每个服务都运行在同一台服务器上，所以localhost不是引用该IP地址吗？是的，您必须使用测试环境的公共IP或主机名。你说得对，两者都在同一台服务器上。然而，前端是在客户端执行的，这意味着如果我访问您的web应用程序，它正在运行，并试图向localhost no my machine发送请求，而不是向您的测试环境发送请求。现在能用了吗？天啊，这太明显了。。。我知道js是客户端的，但我完全忘记了它，并假设它是在服务器端执行的。。。好的，谢谢你！真不敢相信我在这个愚蠢的错误上坚持了这么久哈哈！因此，实际上，我使用了.env文件来更改url，它成功了！伟大的你能记下我的答案吗：）太棒了。