Question

我有一个网站“ mydomain.com”，其中包含来自不同子域“ sub.mydomain.com”的iframe，其中包含一个WordPress页面。页面中的某些js钩接了iframe的某些按钮：

        var target_height = parseInt(obj.contentWindow.document.body.scrollHeight);
    obj.style.height = target_height + 'px'; 
    var iframeOffset = $(obj).offset();

我已经在“ sub.mydomain.com”上配置了nginx，使其包含CORS标头：

    location ^~ /wordpress {
            add_header 'Access-Control-Allow-Origin' "*" always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT, HEAD';
            add_header 'Access-Control-Allow-Credentials' 'true' always;
            add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type,Authorization,Origin,X-Requested-With,Accept,DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;


            index index.php;
            alias /usr/share/webapps/wordpress/;

            if (!-e $request_filename) { rewrite ^ /wordpress/index.php last; }

            location ~ \.php$ {
                    if (!-f $request_filename) { return 404; }
                    include fastcgi.conf;
                    include fastcgi_params;
                    #fastcgi_intercept_errors on;
                    #fastcgi_buffers 16 16k;
                    #fastcgi_buffer_size 32k;
                    fastcgi_index index.php;

                    fastcgi_param SCRIPT_FILENAME $request_filename;
                    fastcgi_pass php;

            }

            location ~ \.(js|css|png|jpg|jpeg|gif|ico)$ {
                    expires max;
            }
    }

通过卷曲，我可以看到包含了CORS标头：

curl https://sub.mydomain.com/wordpress/ -svo.

{ [5 bytes data]
< HTTP/1.1 200 OK
< Server: nginx/1.14.0
< Date: Wed, 22 May 2019 14:51:55 GMT
< Content-Type: text/html; charset=UTF-8
< Transfer-Encoding: chunked
< Connection: keep-alive
< X-Powered-By: PHP/7.2.9
< Link: <https://sub.mydomain.com/wordpress/wp-json/>; rel="https://api.w.org/"
< Link: <https://sub.mydomain.com/wordpress/>; rel=shortlink
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET, POST, OPTIONS, DELETE, PUT, HEAD
< Access-Control-Allow-Credentials: true
< Access-Control-Allow-Headers: User-Agent,Keep-Alive,Content-Type,Authorization,Origin,X-Requested-With,Accept,DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range
< 
{ [15703 bytes data]
* Failed writing body (0 != 7952)
* Failed writing data
* Closing connection 0
} [5 bytes data]
* TLSv1.2 (OUT), TLS alert, close notify (256):
} [2 bytes data]

尽管如此，我仍然有一个关于JS代码的javascript错误：

SecurityError: Permission denied to access property "document" on cross-origin object line:84

对应

var target_height = parseInt(obj.contentWindow.document.body.scrollHeight);

编辑：这是curl -i -X OPTIONS https://sub.mydomain.com/wordpress/的输出：

HTTP/1.1 200 Connection established
Set-Cookie: IPOCDSERVERID=id_srv-01; path=/

HTTP/1.1 405 Not Allowed
Server: nginx/1.14.0
Date: Wed, 22 May 2019 15:43:49 GMT
Content-Type: text/html
Content-Length: 173
Connection: keep-alive
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: User-Agent,Keep-Alive,Content-Type,Authorization,Origin,X-Requested-With,Accept,DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range

<html>
<head><title>405 Not Allowed</title></head>
<body bgcolor="white">
<center><h1>405 Not Allowed</h1></center>
<hr><center>nginx/1.14.0</center>
</body>
</html>

Answer 1

通过https://enable-cors.org/server_nginx.html

if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    #
    # Custom headers and headers various browsers *should* be OK with but aren't
    #
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    #
    # 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';
    add_header 'Content-Length' 0;
    return 204;
 }

如果将其放置在您的位置，它将看到这是一个飞行前请求，并立即返回204。您必须使用所有不同的标头才能将其获得所需的内容。

javascript：尽管启用了cors功能，但拒绝访问跨域对象的属性的权限

1 个答案: