如何将我的请求从js前端释放到我的api (通过带有的nginx )？

Question

上下文:所以我正在为一个非营利组织创建一个网络应用程序。这个项目是从学校开始的，我想使用一些“新”技术。

我选择创建几个服务，并通过对接-撰写来管理它们。我主要有以下服务：

带有django-rest-framework

• Frontend和vuejs

• reverse-proxy的
• 后端api与nginx

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

我的想法是:这个非营利组织没有很多钱，所以我试着测试一种最便宜的解决方案:租用虚拟机，克隆我的项目，并在机器对接撰写程序上运行。

我遇到的问题是，我的所有请求(除了css的一些请求)都无法在这个环境中工作。我有个问题：

当我到达我的主页并尝试从我的nginx中获取一些图像时，我立即在控制台中得到以下消息: CORS请求被阻止:如果我想登录，CORS请求没有succeed.

• After，而不是我的POST请求，火狐中的网络选项卡向我显示只有一个选项是发送，但没有任何答案。

我想CORS或诸如此类的问题是有问题的，但是由于所有的东西都在码头内运行，我没有找到错误和修复。我也不太明白这里到底出了什么问题。这真的是CORS的问题吗？当它在我的个人电脑上完美地工作时，它是连接到对接-合成还是环境？

有人能帮我吗？

这是我的停靠-撰写文件：

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，但它没有解决我的解决方案。

如果有人对如何以更好的方式部署或/以及如何改进我的架构有答案或/和建议，请给我写一个评论。

Answer 1

是连接到对接-合成还是环境，因为它在我的个人电脑上完美地工作？

我想，您在前端使用的主机名/IP是错误的。听起来，您正在使用localhost (也称为IPv4 127.0.0.1或IPv6 ::1 )将请求发送到测试部署后端。

如果我的猜测是正确的:我建议在开始脚本中或者在单独的配置中使用环境变量来指定环境。否则，您可以为每个请求更改代码中的主机名/IP。无论如何，您必须在测试环境中使用主机名/IP。