添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

当Access-Control-Allow-Origin头不存在时,NGINX CORS策略失败,但当头存在时又多次设置它

1 人关注

与标题所说的完全一样,但要注意背景。

确实 可以访问上游资源,而且我允许所有的源头在那里

当我的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是一个Flaskwebserver,使用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
docker-compose
cors
nginx-reverse-proxy
flask-cors
Brady Perry
Brady Perry
发布于 2021-03-22
1 个回答
Brady Perry
Brady Perry
发布于 2021-03-22
已采纳
0 人赞同

我不知道为什么我的问题没有得到任何反馈就被降权,也不知道为什么我被降权。

总之,经过几个小时的键盘敲击,我得到了一些工作。

从本质上讲,在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中添加。

module.exports = {