最新的Chrome 85更新后的CORS问题 [英] CORS Issue after latest Chrome 85 Update

问题描述

我在这里是一个非常新的用户，因此，如果我违反任何规则，请提前道歉。这是我面临的问题，请提出建议。

I am a very new user here so, apologies in advance if I break any rule. Here is the problem I am facing and need suggestions please.

我有一个可与Gmail&

I have a Chrome extension which works with Gmail & consumes APIs from my web server running on nginx through Phusion Passenger server of Rails application.

我的Nginx版本是nginx版本：nginx / 1.15.8，而Phusion Passenger版本是Phusion Passenger Enterprise 6.0。 1

My Nginx version is nginx version: nginx/1.15.8 and Phusion Passenger version is Phusion Passenger Enterprise 6.0.1

我在nginx中具有CORS设置，如下所示：

I had the CORS settings in nginx as follows:

####### CORS Management ##########

add_header 'Access-Control-Allow-Origin' 'https://mail.google.com,https://*.gmail.com';

add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE, HEAD';

add_header Referrer-Policy "no-referrer";

add_header Pragma "no-cache";

##################################

在Chrome 84之前一直可以使用，但是，随着Chrome 85的最新更新，它开始抛出CORS错误，如下所示：

This used to work until Chrome 84, however, with the latest update of Chrome 85, it has started throwing CORS errors as follows:

########### Chrome 85中开始出现错误############

########## Error started appearing in Chrome 85 ############

访问从CORS策略阻止从来源 https://mail.google.com在 https://my-site.com/处获取：请求的请求上不存在 Access-Control-Allow-Origin标头资源。

Access to fetch at 'https://my-site.com/' from origin 'https://mail.google.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

##################################### #####

##########################################

此后，我根据各种来源和博客的建议/参考将CORS设置更新为完全开放，现在更新的CORS设置如下：

After this, I updated the CORS settings to wide open as per the suggestions/reference from various sources and blogs and now updated CORS setting looks like this:

 location / {

     if ($request_method = 'OPTIONS') {

        add_header 'Access-Control-Allow-Origin' $http_origin always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #

        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
        
        #
        # 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' always;
        add_header 'Content-Length' 0 always;

        return 204;
     }

     if ($request_method = 'POST') {

        add_header 'Access-Control-Allow-Origin' $http_origin always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;

     }

     if ($request_method = 'GET') {

        add_header 'Access-Control-Allow-Origin' $http_origin always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;

     }

}

####### ####################################

############################################

更新后在Nginx中进行此设置后，CORS错误消失了，但是现在当扩展程序调用API时，我从服务器收到401未经授权的错误。

After updating this setting in Nginx, the CORS error has gone but now I am getting 401 Unauthorized error from server when the extension makes API call.

我尝试调整所有方法，但无法修复向上。

I tried tweaking all the methods but couldn't fix it up. Is there something which I am missing or doing differently?

请帮助！

推荐答案

Chrome扩展内容脚本
https://www.chromium.org/Home/chromium-security/extension-content-script-fetches

Changes to Cross-Origin Requests in Chrome Extension Content Scripts https://www.chromium.org/Home/chromium-security/extension-content-script-fetches

这篇关于最新的Chrome 85更新后的CORS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！