cors：跨源时严格源：反应 + nginx +弹性搜索

Question

今天下午我对我的反应应用程序做了一些小调整。但是，当尝试从我的 Elasticsearch 服务器获取信息时，我收到了跨域时严格源错误。我过去收到过 CORS 错误，并且总是能够以某种方式处理它们，但这次我陷入了困境。

我的设置：

我有 React 应用程序，使用 axios，发出以下 get 请求：

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应用程序正在使用的路径发出请求，来自邮递员工作得很好。在传递必要的用户名+密码后，我还可以从浏览器执行请求。只有反应应用程序（在本地主机上运行的开发中）似乎不起作用。

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

跨源时严格源（默认）

执行同源请求时发送源、路径和查询字符串。对于跨源请求（仅）当协议安全级别保持相同（HTTPS→HTTPS）时才发送源。不要将 Referer 标头发送到安全性较低的目的地 (HTTPS→HTTP)。

我认为问题可能在于应用程序在 HTTP 而不是 HTTPS 上运行，但通过“HTTPS=true npm start”运行应用程序并没有解决问题。我尝试了不同的调整，无论是在请求端（axios）还是在 nginx 或 es yml 文件中，但似乎都不起作用。感谢您的帮助并致以诚挚的问候。

编辑：

现在也包含屏幕截图：

Answer 1

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

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

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

虽然 elasticsearch 服务器允许授权标头，但这是 - 如果我错了，请纠正我 - 没有由 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-Headers 不允许 access-control-allow-methods、Access-Control-Allow- 不允许 access-control-allow-origin headers，...此时错误清楚地表明了要做什么，即将这些字段添加到elasticsearch配置文件中的Access-Control-Allow-Headers部分。

完成所有操作后，elasticsearch config 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。

感谢大家帮助我，我发布这个答案，以便将来可以使用。欢迎进一步纠正我。

Answer 2

将这两行添加到以下文件中

/etc/nginx/sites-available/yours_conf_file

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Headers' 'Content-Type';

并重新启动 nginx 服务器

sudo systemctl restart nginx