与标题所说的完全一样,但要注意背景。
我 确实 可以访问上游资源,而且我允许所有的源头在那里 。
当我的NGINX conf
不
包括指令
我的浏览器告诉我。
add_header 'Access-Control-Allow-Origin' '*';
从'http://localhost/{{ upstream_path_redacted }}'访问XMLHttpRequest。 原点'http://localhost:8080'的访问已被CORS策略阻止了。对preflight的响应 请求的响应没有通过访问控制检查。所请求的资源上没有 "访问控制-允许-起源 "头。 请求的资源上没有'Access-Control-Allow-Origin'头。
当我包含上述指令时,我的浏览器告诉我
在'http://localhost/{{ upstream_path_redacted }}'的XMLHttpRequest的访问被CORS策略阻止了。'Access-Control-Allow-Origin'头包含多个值'http://localhost:8080, *',但只允许一个。
第二个问题是有道理的。正如我所说,我允许上游服务器上的所有来源。因此,我不明白为什么删除该指令会导致第一个问题。
我的
。
nginx.conf
events {}
http {
upstream my-upstream-service {
server my-upstream-service:5000;
server {
listen 80 default_server;
location / {
# this works fine. just included as base case.
return 200 'ok';
add_header Content-Type text/plain;
add_header 'Access-Control-Allow-Origin' '*';
location /upstream {
# removing the next uncommented line results in 'missing header' issue.
# keeping it results in 'multiple header' issue.
add_header 'Access-Control-Allow-Origin' '*';
proxy_pass http://my-upstream-service;
更让我困惑的是:在查看my-upstream-server
的日志和nginx
的日志时,请求成功地被发送到了上游服务器?
我所有的调查都给我带来了解决上述任何一个问题的方案,但当这两个问题都发生时,却不知道该怎么做。我被难住了。
如有必要,请进一步说明情况。
我正在使用docker-compose
来部署这些服务(包括前端,这是一个Vue SPA)。
my-upstream-service
是一个Flask
webserver,使用Flask-Cors。
下面是docker-compose.yml
的内容
version: '3.8'
networks:
gateway-service:
driver: bridge
services:
my-upstream-service:
build:
context: path/to/context/
dockerfile: path/to/dockerfile
ports:
- "5000:5000"
expose:
- "5000"
networks:
- gateway-service
frontend:
build:
context: /path/to/context
dockerfile: /path/to/dockerfile
ports:
- "8080:8080"
expose:
- "8080"
depends_on:
- gateway
networks:
- gateway-service
gateway:
image: nginx:1.19.8-alpine
volumes:
# this is where my nginx.conf lives.
- ./nginx/:/etc/nginx/
ports:
- "80:80"
environment:
- NGINX_PORT=80
depends_on:
- my-upstream-service
networks:
- gateway-service
我不知道为什么我的问题没有得到任何反馈就被降权,也不知道为什么我被降权。
总之,经过几个小时的键盘敲击,我得到了一些工作。
从本质上讲,在NGINX反向代理后面为Vue应用提供服务,虽然产生了更多的问题,但从长远来看,解决了上述的问题。
我不得不在我的Vue应用程序和我的NGINX配置文件中添加额外的配置,以使Vue的所有开发功能能够完全工作。下面是最终NGINX配置文件的最小版本。
events {} http { upstream upstream-service { server upstream-service:5000; upstream front-end { server front-end:8080; server { listen 80 default_server; location / { proxy_pass http://front-end; proxy_set_header Host localhost; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-Host localhost; proxy_set_header X-Forwarded-Server localhost; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Forwarded-For $remote_addr; proxy_redirect off; proxy_connect_timeout 90s; proxy_read_timeout 90s; proxy_send_timeout 90s; location /sockjs-node { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $remote_addr; proxy_set_header Host $host; proxy_pass http://front-end; proxy_redirect off; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; location /upstream { proxy_pass http://upstream-service;
我还不得不在我的
中添加。vue.config.js