我最近决定使用Docker来容器化我的Web应用程序,但是(自然)我遇到了一些问题。
问题当然是(没有双关语)CORS。为了简化:我在前端有一个React应用程序,它位于用docker-compose创建的容器A中;然后,有一个RESTful API,用于处理使用python的烧瓶进行的用户特定动作(授权等),该烧瓶位于容器B中,与A自然位于同一网络上。前端应用程序使用旧版本向此API发出请求fetch()
。在将所有这些打包到docker中之前,一切工作正常,我使用flask-cors
扩展名配置了CORS处理,即使将API进行了容器化并且前端松动了也可以工作。现在所有这些都在容器内-没有对API的请求通过。
控制台日志:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at {API_endpoint}. (Reason: CORS request did not succeed).
从前端容器中卷曲API就像一个魅力。
我原来在码头工人之前工作的服务器端CORS配置看起来像这样:
cors = CORS(
app,supports_credentials=True,resources={
r'/*': {
'origins': [
'http://localhost:3000/','http://127.0.0.1:3000/',]
}
}
)
现在,自然地,当我切换到docker时,我认为这些来源都不会与docker网络中使用的主机名匹配(对吗?),所以我尝试将它们切换为类似'http://service-name:port/'
的名称。 (使用我在docker ps
中获得的名称)。但是令我惊讶的是-它不起作用。我尝试了更多,包括检查docker网络0.0.0.0
获得的IPv4,甚至坚持使用localhost
/ 127.0.0.1
。 CORS()
的默认设置也失败了。
我注意到的另一件事是,当我尝试从浏览器发出请求时,flask应用程序不会像以前那样记录通常的OPTIONS
请求。我想知道问题是否出在后端以外的地方,到现在我已经无望了。
docker-compose.yml:
version: '3'
services:
# front-end app
front:
build: ./front
restart: always
ports:
- "3000:3000"
volumes:
- ./front:/app
depends_on:
- users
environment:
REact_APP_USER_SERVICE: "http://score-builder_users_1:5000"
# token dealer service
tokens:
build: ./tokens
restart: always
expose:
- "5001"
volumes:
- ./tokens:/app
environment:
flaSK_ENV: 'development'
# users service
users:
build: ./users
restart: always
expose:
- "5000"
# ports:
# - "5000:5000"
volumes:
- ./users:/app
environment:
flaSK_ENV: 'development'
TOKEN_SERVICE: 'http://score-builder_tokens_1:5001'
FRONT_END: 'http://score-builder_front_1:3000/'
depends_on:
- tokens
- users-db
# postgres database for users service
users-db:
restart: always
image: postgres:alpine
environment:
POSTGRES_USER: user
POSTGRES_PASSWORD: password
POSTGRES_DB: users_dev
expose:
- "5432"