使用 docker nginx 从本地 reactjs 向流明后端发出请求时出现 cors 问题

Question

我在通过 reactjs 测试我的 API 端点时遇到了 CORS 问题。

我在 google chrome 日志中收到此错误

从源“http://localhost:3000”对“http://localhost/v1/testendpoint”处的 XMLHttpRequest 的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。

另外，CORS 是在 laravel 中间件中设置的。

    {
        $headers = [
          'Access-Control-Allow-Origin'      => '*',
          'Access-Control-Allow-Methods'     => 'POST, GET, PUT, DELETE, OPTIONS',
          'Access-Control-Allow-Headers'     => 'Content-Type, Authorization, Accept, X-Requested-With'
        ];

      if ($request->isMethod('OPTIONS'))
      {
          return response()->json('{"method":"OPTIONS"}', 200, $headers);
      }

      $response = $next($request);

      foreach($headers as $key => $value)
      {
          $response->header($key, $value);
      }

      return $response;    
    }

docker里面的nginx设置如下。

    listen   80; ## listen for ipv4; this line is default and implied
    listen   [::]:80 default ipv6only=on; ## listen for ipv6

    #root /usr/share/nginx/html;
    root /var/www/html/public;
    index index.php index.html index.htm;

    # Make site accessible from http://localhost/
    server_name _;

    # Disable sendfile as per https://docs.vagrantup.com/v2/synced-folders/virtualbox.html
    sendfile off;

    # Security - Hide nginx version number in error pages and Server header
    server_tokens off;

    # Add stdout logging
    error_log /dev/stdout info;
    access_log /dev/stdout;

    # reduce the data that needs to be sent over network
    gzip on;
    gzip_min_length 10240;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css text/xml application/json text/javascript application/x-javascript application/xml;
    gzip_disable "MSIE [1-6]\.";

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to index.html
        try_files $uri $uri/ /index.php?$query_string;

        add_header 'Access-Control-Allow-Origin: *');
        add_header 'Access-Control-Allow-Origin: GET, POST, DELETE, PUT, PATCH, OPTIONS');
        add_header 'Access-Control-Allow-Credentials: true');
    }

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # pass the PHP scripts to FastCGI server listening on socket
    #
    location ~ \.php$ {
        try_files $uri /index.php =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/run/php/php7.2-fpm.sock;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }

        location ~* \.(jpg|jpeg|gif|png|css|js|ico|xml)$ {
                expires           5d;
        }

    # deny access to . files, for security
    #
    location ~ /\. {
            log_not_found off;
            deny all;
    }
}

有没有人知道为什么会发生这种情况。

Answer 1

我找到了解决这个问题的方法，通过使用谷歌浏览器中的插件来绕过这个谷歌允许 CORS 插件。