cors：严格来源何时交叉来源：React+ nginx +ElasticSearch

8aqjt8rx 于 2023-01-12 发布在 Nginx

关注(0)|答案(2)|浏览(175)

今天下午，我对我的react应用做了一些小的调整。但是，当我试图从我的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

从postman发出请求，使用react应用程序使用的路径，运行得非常好。我也可以在浏览器上发出请求，只要输入必要的用户名和密码。只有react应用程序（正在开发中，运行在本地主机上）似乎不起作用。
从https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors中，我了解到：
交叉原点时严格原点（默认）
执行同源请求时发送源、路径和查询字符串。对于跨源请求，（仅）在协议安全级别保持不变（HTTPS → HTTPS）时发送源。不要将引用标头发送到安全性较低的目标（HTTPS → HTTP）。
我想问题可能出在应用程序运行在HTTP而不是HTTPS上，但是通过"HTTPS = true npm start"运行应用程序并没有解决这个问题。我尝试了不同的调整，无论是在nginx中的请求端（axios）还是在es yml文件中，但似乎都不起作用。谢谢你的帮助，并向你致以亲切的问候。
编辑：
现在也包含屏幕截图：

nginx

来源：https://stackoverflow.com/questions/71515735/cors-strict-origin-when-cross-origin-react-nginx-elasticsearch

2条答案

按热度按时间

s6fujrry1#

好的，我可以在今天下午解决这个错误。首先，不是所有的错误信息都显示在我的控制台上，这使得检测错误变得更加困难。正如上面正确指出的，我看到的错误信息只是一个普通的信息。在我的控制台上，我需要更新设置如下：

之后，完整的CORS错误可见，这需要我对NGINX代理服务器和elasticsearch服务器进行一些更改。
第一个错误是：“印前检查响应中的Access-Control-Allow-Headers不允许标题字段授权”
虽然elasticsearch服务器允许Authorization报头，但这是-如果我错了请纠正我-NGINX代理服务器没有正确传递的，因为那里的设置是：“proxy_hide_header访问控制允许标头;“
我将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-Headers不允许使用Access-Control-allow-origin...此时，错误明确指示了要执行的操作，即将这些字段添加到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

所以我添加了：访问控制允许方法、访问控制允许来源、访问控制允许凭据。
谢谢大家的帮助，我把这个答案贴出来，以便将来使用。请随时进一步纠正我。

赞(0）回复(0）举报 2023-01-12

h4cxqtbf2#

将这两行添加到以下文件中
/etc/nginx/可用站点/您的配置文件

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

并重新启动nginx服务器

sudo systemctl restart nginx

赞(0）回复(0）举报 2023-01-12

我来回答

cors：严格来源何时交叉来源：React+ nginx +ElasticSearch

2条答案

相关问题

热门标签

最新问答