CORS:访问-控制-在GET/POST请求中未使用fetch找到允许源标头

Question

我在使用javascript fetch的GET或POST请求上遇到CORS头fetch的问题

Access to fetch at 'https://192.168.1.77/api/contract/list' from origin 'https://192.168.1.77:8090' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

但我可以看到，在检查头时，Access-Control-Allow-Origin头是存在的。

响应头

Access-Control-Allow-Headers: DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Accept-Encoding,Accept-Language,Accept,Sec-Fetch-Mode,Sec-Fetch-Site,Sec-GPC,Referer,Pragma,Connection,Host,Content-Length
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Expose-Headers: Content-Length,Content-Range
Cache-Control: no-cache, private
Connection: keep-alive
Content-Type: application/json
Date: Thu, 03 Feb 2022 23:51:05 GMT
Server: nginx/1.21.0
Transfer-Encoding: chunked
WWW-Authenticate: Bearer
X-Debug-Token: 65149f
X-Debug-Token-Link: https://192.168.1.77/_profiler/65149f
X-Powered-By: PHP/8.1.0
X-Robots-Tag: noindex

请求头

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7
Cache-Control: no-cache
Connection: keep-alive
Content-Type: application/json
Host: 192.168.1.77
Origin: https://192.168.1.77:8090
Pragma: no-cache
Referer: https://192.168.1.77:8090/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
Sec-GPC: 1
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Mobile Safari/537.36

获取请求

fetch(url, {
    mode: 'cors',
    headers: {
      'Content-Type': 'application/json'
    }
  }
);

Nginx config

    location ~ ^/index\.php(/|$) {
        if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' 'https://192.168.1.77:8090';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Accept-Encoding,Accept-Language,Accept,Sec-Fetch-Mode,Sec-Fetch-Site,Sec-GPC,Referer,Pragma,Connection,Host,Content-Length' always;
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Vary' 'origin';
        }

        if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' 'https://192.168.1.77:8090';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Accept-Encoding,Accept-Language,Accept,Sec-Fetch-Mode,Sec-Fetch-Site,Sec-GPC,Referer,Pragma,Connection,Host,Content-Length' always;
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Vary' 'origin';
        }

        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' 'https://192.168.1.77:8090';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Accept-Encoding,Accept-Language,Accept,Sec-Fetch-Mode,Sec-Fetch-Site,Sec-GPC,Referer,Pragma,Connection,Host,Content-Length' always;
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Vary' 'origin';

            # 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;
        }

        fastcgi_buffers 16 16k;
        fastcgi_buffer_size 32k;

        fastcgi_pass php-upstream;
        fastcgi_split_path_info ^(.+\.php)(/.*)$;
        include fastcgi_params;

        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        fastcgi_param DOCUMENT_ROOT $realpath_root;

        internal;
    }

我错过了什么？

Answer 1

从服务器端，从您的API中添加以下行，以便从服务器外部访问：

header('Access-Control-Allow-Origin: *');
//Here the methods needed are added
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');

Answer 2

你写的

1. ，“我可以看到Access-Control-Allow-Origin报头…”，但在你粘贴的代码中，我没有看到。我正在查看上面粘贴的响应头。(为了清楚起见：Access-Control-Allow-Origin是它自己的头键。它没有捆绑到Access-Control-Allow-Headers或其他任何东西中。)

您可能需要从api返回一个响应，如下所示：

//请求: fetch(url，{Header：{‘Content’：'application/json‘}} )；//响应: const corsHeaders ={’Access-Control-允许-原产地‘：'*'，’访问控制-控制-允许-方法‘：'GET，PUT，OPTIONS'，’Access-Control-允许-标头‘：’内容-类型，内容-长度‘，//您在这里有一个很长的列表，适合自己//…。需要…的任何其他标头}；返回新响应(“酷体…”)，{ headers: corsHeaders }；

旁白:默认情况下，fetch有mode: 'cors'，所以不需要在请求代码中包括.

1. ，你的意思是从

https://192.168.1.77:8090/api/contract/list而不是https://192.168.1.77/api/contract/list？

可能是不同的/丢失的端口号导致了跨源问题？？。