cors: strict-origin-when-cross-origin: react + nginx + elasticsearch

cors: strict-origin-when-cross-origin: react + nginx + elasticsearch

今天下午我对我的 React 应用程序做了一些小改动。但是,当尝试从我的 elasticsearch 服务器获取信息时,我收到了 strict-origin-when-cross-origin 错误。我过去收到过 CORS 错误,并且总是能够以某种方式处理它们,但这次我被卡住了。

我的设置:

我有 React 应用程序,使用 axios,发出以下获取请求:

const authorization = process.env.REACT_APP_ELASTICSEARCH_AUTHORIZATION;

const header = {
'Authorization': authorization,


}

axios.get(`${path}/${searchIndex}/_search`,
            {headers: header}

然后请求被发送到我的代理服务器运行 nginx。

设置有以下几种:

location /somelocation/ {
         proxy_pass https://someip:someport/;
         proxy_redirect off;
         proxy_set_header  X-Real-IP  $remote_addr;
         proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header  Host $http_host;
         proxy_pass_header Access-Control-Allow-Origin;
         proxy_pass_header Access-Control-Allow-Methods;
         proxy_hide_header Access-Control-Allow-Headers;
         add_header Access-Control-Allow-Headers 'X-Requested-With, Content-Type';
         add_header Access-Control-Allow-Credentials true;
         proxy_pass_header Authorization; 
}

在 elasticsearch 服务器上,我有以下 CORS 设置:

http.cors.enabled: true
http.cors.allow-credentials: true
http.cors.allow-origin: '*'
http.cors.allow-headers: X-Requested-With, X-Auth-Token, Content-Type, Content-Length, Authorization, Access-Control-Allow-Headers, Accept
http.cors.allow-methods: OPTIONS, HEAD, GET, POST, PUT, DELETE

使用 React 应用程序正在使用的路径从邮递员发出请求,效果非常好。在传递必要的用户名+密码后,我还可以从我的浏览器执行请求。只有 React 应用程序(在本地主机上开发 运行)似乎不起作用。

来自https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors 我的理解:

strict-origin-when-cross-origin (default)

Send the origin, path, and querystring when performing a same-origin request. For cross-origin requests send the origin (only) when the protocol security level stays same (HTTPS→HTTPS). Don't send the Referer header to less secure destinations (HTTPS→HTTP).

我认为问题可能出在应用程序运行在 HTTP 而不是 HTTPS 上,但是 运行 通过 'HTTPS=true npm start' 应用程序并没有解决问题。我尝试了不同的调整,无论是在请求端(axios)还是在 nginx 或 es yml 文件中,但似乎没有任何效果。感谢您的帮助,并向您致以诚挚的问候。

编辑:

现在还包括屏幕截图:

好的,我在今天下午的课程中解决了这个错误。首先,并非所有错误消息都显示在我的控制台中,这当然使检测错误变得更加困难。正如上面正确指出的那样,我看到的错误消息只是一条通用消息。在我的控制台中,我需要将设置更新为以下内容:

之后可以看到完整的 CORS 错误,这需要我对 NGINX 代理服务器和 elasticsearch 服务器进行一些更改。

第一个错误是:“header 预检响应中 Access-Control-Allow-Headers 不允许字段授权”

尽管 elasticsearch 服务器允许授权 header,但这是 - 如果我错了请纠正我 - NGINX 代理服务器未正确传递,因为那里的设置是:“proxy_hide_header Access-Control-Allow-Headers;"

我将 NGINX 设置更改为:

         proxy_pass https://******:9200/;
         proxy_redirect off;
         proxy_set_header  X-Real-IP  $remote_addr;
         proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header  Host $http_host;
         proxy_pass_header Access-Control-Allow-Origin;
         proxy_pass_header Access-Control-Allow-Methods;
#         proxy_hide_header Access-Control-Allow-Headers;
        proxy_pass_header Access-Control-Allow-Headers;
        # add_header Access-Control-Allow-Headers 'X-Requested-With, Content-Type';
        # add_header Access-Control-Allow-Credentials true;
         proxy_pass_header Authorization;

被注释掉的行是旧的配置。

尝试几个新请求时,显示了其他 CORS 策略,例如 access-control-allow-methods 不被 Access-control-Allow-Headers 允许,access-control-allow-origin 不被 Access-Control-Allow-Headers 允许。 .. 那时错误清楚地表明要做什么,即将这些字段添加到 elasticsearch 配置文件中的 Access-Control-Allow-Headers 部分。

完成所有内容后,elasticsearch 配置 yml 文件如下所示:

http.cors.enabled: true
http.cors.allow-credentials: true
http.cors.allow-origin: '*'
http.cors.allow-headers: X-Requested-With, X-Auth-Token, Content-Type, Content-Length, Authorization, Access-Control-Allow-Headers, Accept, Access-Control-Allow-Methods, Access-Control-Allow-Origin, Access-Control-Allow-Credentials
http.cors.allow-methods: OPTIONS, HEAD, GET, POST, PUT, DELETE

所以我补充说:Access-Control-Allow-Methods, Access-Control-Allow-Origin, Access-Control-Allow-Credentials.

感谢大家帮助我,我 post 这个答案可能会用于将来的目的。欢迎进一步指正。