Angular 8和Flask REST API作为Docker swarm services CORS请求未成功
我有一个小项目,有3个部分:Angular 8和Flask REST API作为Docker swarm services CORS请求未成功,angular,docker,nginx,flask,Angular,Docker,Nginx,Flask,我有一个小项目,有3个部分: 一个有角度的web应用程序 烧瓶原料药 MongoDB数据库 我试图将所有内容都放在Docker中,将每个组件作为一个映像,并将所有内容收集到一个stack.yaml文件中,然后作为swarm部署。所有这些只是为了学习Docker和所有东西的链接方式 问题是我不能让CORS工作。现在我有以下设置: 瓶子 我觉得以下是我的app.py的重要部分: from flask_cors import CORS, cross_origin app = Flask(__na
- 一个有角度的web应用程序
- 烧瓶原料药
- MongoDB数据库
app.py
的重要部分:
from flask_cors import CORS, cross_origin
app = Flask(__name__)
CORS(app, resources={r"/the_library/*": {"origins": "*", 'methods': 'POST'}})
@app.route('/the_library/upload', methods=["POST"])
def upload_file():
# here I am using request.files['document'] to get a file and I return a JSON
@app.route("/the_library/find", methods=["POST"])
def find_files():
# this returns a JSON
if __name__ == '__main__':
app.run(host='library_api', debug=True, port=5000)
如您所见,我添加了flask\u cors
并启用了cors。我还添加了以下内容,希望它能做些什么(据我所知,以下几行和flask_cors
都做同样的事情):
角度8
网络应用由nginx提供服务。这是Dockerfile:
FROM node:12.6 as builder
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json package-lock.json /app/
RUN cd /app && npm install
RUN npm install -g @angular/cli
# add app
COPY . /app
# start app
RUN cd /app && npm run build
FROM nginx:1.17.8
RUN rm -rf /usr/share/nginx/html/*
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=builder /app/dist/TheLibrary/ /usr/share/nginx/html/
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
web应用程序加载(所有静态的东西),但是Firefox中的开发者控制台抛出跨源请求被阻止:同源策略不允许读取远程资源http://library_api:5000/the_library/find. (原因:CORS请求未成功)。
尝试调用API时
这里还有nginx.conf
:
worker_processes 1;
events {
worker_connections 1024;
}
http {
server {
listen 80;
server_name library_frontend;
root /usr/share/nginx/html;
index index.html index.htm;
include /etc/nginx/mime.types;
gzip on;
gzip_min_length 1000;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
location / {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
#
# Tell client that this pre-flight info is valid for 20 days
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
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';
}
if ($request_method = 'GET') {
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';
}
try_files $uri $uri/ /index.html;
}
location ~ /library_api/ {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
#
# Tell client that this pre-flight info is valid for 20 days
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
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';
}
if ($request_method = 'GET') {
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';
}
}
}
}
正如您所见,我尝试在两个位置启用CORS,但我不太确定这是一种方式,或者如果我甚至需要nginx来实现这一点,我将非常乐意在没有nginx的情况下实现这一点。我只是试着用不同的方法来解决CORS问题,最后学习了一些使用nginx的教程
这是将所有内容链接在一起的stack.yaml
文件:
version: '3.3'
services:
api:
image: library_api
hostname: library_api
networks:
- api_network
frontend:
image: library_frontend
hostname: frontend
ports:
- 8080:80
networks:
- api_network
networks:
api_network:
driver: overlay
我试过的东西
我用Docker exec-it bash
输入了Docker服务,并ping了应该相互联系的服务,它们都很好
我还尝试通过添加
ports:
- 5000:5000
到stack.yaml
,但它没有改变任何东西
我在Docker之外通过向Flask API中添加COR使一切都正常工作,但我在Docker中遇到了一些问题,我就是不知道该做什么。我最终发现了问题,对Angular如何为应用程序服务的理解很差。我认为Angular有一个后端来执行API调用,但实际上,代码被编译并作为一个静态网站,因此,我的API调用最终是从客户端完成的AJAX调用 问题是我在Angular应用程序中使用了
docker\u api\u hostname:port
作为api调用的基本URL,相反,我应该使用localhost:port
并将api使用的端口转发给主机,如问题的Things I Twest部分所述
ports:
- 5000:5000