OpenLayers 3: Yêu cầu đa nguồn gốc bị chặn: Chính sách xuất xứ tương tự không cho phép


8

Sử dụng OpenLayers 3, tôi không thể xóa thông báo này:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://myserver:8085/geoserver/sf/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=sf:view1&maxFeatures=1&outputFormat=JSON. This can be fixed by moving the resource to the same domain or enabling CORS.

Đây là mã:

// Ol3 only supports Projections "EPSG:4326" and "EPSG:3857". For every other projection you need proj4js
        proj4.defs("EPSG:2236", "+proj=tmerc +lat_0=24.33333333333333 +lon_0=-81 +k=0.999941177 +x_0=200000.0001016002 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=us-ft +no_defs");

        // Leases Layer
        var myLayer = new ol.layer.Vector({
            source: new ol.source.GeoJSON({
                projection: 'EPSG:2236',
                url: 'http://myserver:8085/geoserver/sf/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=sf:view1&maxFeatures=1&outputFormat=JSON',
                crossOrigin: null
            })
        });

// View
        var view = new ol.View({
            projection: 'EPSG:2236',
            center: [0, 0],
            zoom: 4
        });

        // Map
        var map = new ol.Map({
            target: 'map',
            renderer: 'canvas',
            layers: [myLayer],
            view: view
        });

Tôi đã thử thiết lập cài đặt crossOrigin thành:

crossOrigin: null
crossOrigin: 'null'
crossOrigin: 'anonymous'

Tôi chỉ thấy điều khiển phóng to / thu nhỏ nhưng lớp không được hiển thị.


Tôi đã đi với tùy chọn 3 của simon dưới đây. Tôi đã kích hoạt CORS trong GeoServer bằng cách sao chép các tệp jar jetty-servlets cần thiết và bật nó trong \ WEB-INF \ web.xml:

<filter>
    <filter-name>cross-origin</filter-name>
    <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
    <init-param>
        <param-name>allowedOrigins</param-name>
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>allowedMethods</param-name>
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>allowedHeaders</param-name>
        <param-value>*</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>cross-origin</filter-name>
    <filter-pattern>/*</filter-pattern>
</filter-mapping>

Sau khi tôi làm điều đó, tôi đã kiểm tra lại trang và nhận được cùng một lỗi:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://myserver:8085/geoserver/sf/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=sf:view1&maxFeatures=1&outputFormat=JSON. This can be fixed by moving the resource to the same domain or enabling CORS.

Hình như tôi vẫn còn thiếu một cái gì đó. Tôi có phải làm bất cứ điều gì từ OpenLayers Side không?


Cuối cùng tôi đã thoát khỏi Jetty và gỡ cài đặt hoàn toàn GeoServer. Vấn đề là khi bạn cài đặt trình cài đặt windows geoserver, nó sẽ cài đặt một phiên bản cầu cảng đã 4 năm tuổi! (Phiên bản Jetty 6.1.8) Mặc dù tôi đã sao chép các tệp jar cho CORS, nhưng nó chỉ được hỗ trợ trong Jetty 7+.

Tôi phát hiện ra rằng bạn có thể cài đặt tệp WAR. Tôi đã quyết định sử dụng Tomcat vì đó là những gì GeoServer chủ yếu được thử nghiệm theo ghi chú này từ trang web GeoServer:

Lưu ý GeoServer đã được thử nghiệm chủ yếu bằng Tomcat và do đó các hướng dẫn này có thể không hoạt động với các ứng dụng container khác.

Đây là các hướng dẫn để cài đặt tệp WAR:

http://docs.geoserver.org/ sóng / en / user / install / war.html

Đây cũng là một video hướng dẫn tuyệt vời:

https://www.youtube.com/watch?v=YEOA8WWWVCw

Sau khi hoàn tất cài đặt, bạn kích hoạt CORS:

http://enable-cors.org/server_tomcat.html


Tôi không thể kiểm tra nó, địa chỉ bạn cung cấp không hoạt động.
Simon Zyx

Thật không may, tất cả trong mạng nội bộ của nó. Hai máy chủ của tôi (máy chủ địa lý và máy chủ OL) đều nằm trên mạng nội bộ.
dùng3657279

Tôi đã thực hiện thành công đường dẫn "Cập nhật số 2" được mô tả ở trên. Nếu bạn dự định làm điều tương tự, hãy nhớ rằng tệp web.xml nằm trong thư mục GeoServer mới được triển khai, ví dụ: \ xampp \ tomcat \ webapps \ geoserver \ WEB-INF \ web.xml
Lauden

Câu trả lời:


4

Thay vào đó, có một cách giải quyết dễ dàng bằng JSONP:

  1. Bạn cần kích hoạt JSONP trong máy chủ địa lý. Để bật JSONP, bạn cần thêm phần tiếp theo vào tệp webDB của mình (ví dụ: C: \ Program Files (x86) \ GeoServer 2.4.4 \ webapps \ geoserver \ WEB-INF \ web.xml)

... ENABLE_JSONP đúng ... 2. Khởi động lại máy chủ địa lý của bạn. Bây giờ đối với yêu cầu GetFeatureInfo , máy chủ địa lý sẽ gửi parseResponse (dữ liệu JSON) cho khách hàng

  1. JSONP hoạt động như thế nào từ máy khách (JavaScript)? Cuộc gọi JSONP rất đơn giản. Bạn cần thêm một tập lệnh với src = url ( url là url GetFeatureInfo) vào tiêu đề

    var tag = document.createEuity ("script"); tag.src = url; document.getElementsByTagName ("head") [0] .appendChild (tag);

Khi tập lệnh được nối, nó sẽ gọi jsonp từ máy chủ. gọi hàm parseRespose. Vì vậy, bạn cần xác định hàm parseResponse như sau. Phạm vi của chức năng này phải là toàn cầu.

hàm parseResponse (dữ liệu) {var Feature = data.features [0]; console.log (tính năng);
};


Đây là một bài viết cũ nhưng tôi cảm thấy trong cùng một vấn đề, tôi đã xoay sở để xử lý nó với JSONP nhưng nó chỉ hữu ích để nhận các tính năng từ Geoserver tuy nhiên nếu bạn có ý định sử dụng WFS-T thì bạn bị mắc kẹt, tôi đã viết một số tập lệnh php cho CRUD hoạt động như một kế hoạch B và vẫn đang tìm cách kích hoạt CORS trong máy chủ địa lý 2.9
Hicham Zouarhi

3

Tôi đã đối mặt với cùng một vấn đề và tôi đã thử nhiều giải pháp thảo luận ở đây hoặc trong các diễn đàn khác và cuối cùng tôi đã giải quyết được vấn đề kích hoạt Cross Origin trong Geoserver.

Sau nhiều thử nghiệm, tôi phát hiện ra rằng giải pháp này khá đơn giản theo các bước chính xác được tìm thấy trong trang web của Jetty Jetty Cross Origin Filter .

Nhưng với một thay đổi nhỏ, trang nói rằng chúng tôi phải sao chép bộ lọc Cross-Origin sau vào tệp cấu hình ( Web.xml ), nhưng giải pháp hoạt động với tôi là sao chép cấu hình xml của bộ lọc này vào ( webdefault.xml ) tệp cấu hình, khi áp dụng thay đổi này, máy chủ địa lý hoạt động như một bùa mê và tôi có thể chạy bất kỳ WFS, WMS GetFeatureInfoRequest ở định dạng JSON bằng AJAX thay vì sử dụng linh hồn IFrame.

Tôi đang sử dụng các phiên bản phần mềm sau:

  • Vô biên OpenGeo v4.5.
  • Máy chủ địa lý v 2.6.2.
  • Cầu tàu v 7.6.13.v20130916.

Dưới đây là các bước chi tiết:

  1. Tải xuống phiên bản phù hợp của các Jetty servlets theo phiên bản cầu tàu của bạn từ trang này Jetty Servlets .
  2. Trong ví dụ này, tôi đang sử dụng jetty v7.6.13.v20130916 vì vậy tệp jar nên được đặt tên
    ( jetty-servlets-7.6.13.v20130916.jar ) tên tệp sẽ khác nhau theo phiên bản cầu tàu - không thay đổi tên của nó bởi vì cầu cảng khớp với tên của servlet với phiên bản của nó như:
    jetty-servlets - <% JETTY_VERSION%>. jar, vì vậy đừng đổi tên nó.
  3. Dừng các dịch vụ (GeoServer, Postgres) và Lấy một bản sao từ thư mục OpenGeo nằm trong
    ( C: \ Program Files (x86) \ ràng buộc \ OpenGeo ) và Sao chép thư mục OpenGeo nằm trong
    ( C: \ ProgramData \ ràng buộc \ OpenGeo ) trước khi bắt đầu hướng dẫn này, như một bước phòng ngừa.

  4. Sao chép tệp ( jetty-servlets-7.6.13.v20130916.jar ) (As-is) vào thư mục jetty Lib
    ( * C: \ Program Files (x86) \ ràng buộc \ OpenGeo \ jetty \ lib * ) cũng có thể thư mục thay đổi theo thư mục cài đặt của bạn.

  5. Sao chép và dán các dòng xml sau vào ( webdefault.xml ) nằm trong
    ( C: \ Program Files (x86) \ ràng buộc \ OpenGeo \ jetty \ ect \ webdefault.xml ), tôi không chắc rằng vị trí của các dòng này để đặt trong tệp có quan trọng hay không nhưng tôi dán chúng bắt đầu từ dòng # 306 sau </serlet-mapping>.
<filter>
    <filter-name>cross-origin</filter-name>
    <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>cross-origin</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>
  1. Bắt đầu các dịch vụ ( GeoServer , Postgres ), đợi vài giây và duyệt đến trang máy chủ địa lý, máy chủ địa lý sẽ bắt đầu chính xác.

Hướng dẫn này làm việc cho tôi và tôi hy vọng nó hiệu quả với bất kỳ ai gặp phải vấn đề tương tự.


Đây là câu hỏi thứ ba mà bạn đã đăng cùng một câu trả lời. Bạn có thể xem lại từng câu trả lời của mình để quyết định xem họ có thực sự trả lời câu hỏi đang được hỏi không hoặc chỉ là lời khuyên chung chung?
PolyGeo

Tôi chỉ không biết làm thế nào để làm trọng tài cho câu trả lời khác của mình, vì vậy tôi đã sao chép nó ở đây một lần nữa
Ahmed GIS

lúc cầu xin tôi đang tìm giải pháp cho vấn đề Cross-Origin với Geoserver và Openlayers, sau khi tôi tìm ra giải pháp tôi muốn chia sẻ nó với những người khác gặp phải vấn đề tương tự, vì vậy tôi đã tìm kiếm ở đây những từ khóa này (CORS , Openlayers, Geoserver) và tôi đã trả lời những câu hỏi tương tự cho vấn đề của mình nhưng tôi không biết làm thế nào để làm trọng tài cho câu trả lời khác của mình, vì vậy tôi đã sao chép nó ở đây một lần nữa. Tôi không có ý lặp lại câu trả lời của mình, tôi muốn giúp đỡ những người khác như trang web tuyệt vời này đã giúp tôi trong những vấn đề khác.
Ahmed GIS

Tôi không có quyền truy cập vào máy chủ địa lý của lớp nguồn và không biết chủ sở hữu của máy chủ đã làm gì.
Magno C

@MagnoC Trước tiên, bạn phải kiểm tra với chủ sở hữu máy chủ có thể anh ta đã thay đổi tên lớp hoặc một cái gì đó khác.
Ahmed GIS

1

Cài đặt crossOrigin chỉ tồn tại (?) Cho ol.source.TileImage. ( http://openlayers.org/en/master/apidoc/ol.source.TileImage.html - bỏ chọn "Chỉ ổn định" ở góc trên bên phải). ol.source.GeoJSON không có cài đặt chéo, vì bạn không thể truy cập JSON thông qua các yêu cầu giữa các trang web.

Bạn có nhiều cách khác nhau xung quanh điều này:

  1. sử dụng proxy web cho các cuộc gọi ajax nếu bạn không có quyền truy cập vào máy chủ, nơi json đến từ. (Tìm kiếm ví dụ cho ajax proxy)
  2. bạn có thể sử dụng jsonp nếu bạn có quyền truy cập vào máy chủ. Đây thường là giải pháp ưa thích nhưng tôi không biết liệu nó có hoạt động với Geojson không và bạn có thể phải ghi đè chức năng của trình tải ( http://en.wikipedia.org/wiki/JSONP - Cách nhận JSON từ Geoserver bằng cách sử dụng Yêu cầu AJAX - http://openlayers.org/en/master/examples/vector-osm.js <- một ví dụ để sử dụng chức năng tải tùy chỉnh)
  3. cho phép các yêu cầu nguồn gốc chéo trên máy chủ. ( http://en.wikipedia.org/wiki/Cross-origin_resource_shaming )
  4. nếu dữ liệu là tĩnh, hãy tải xuống và đặt nó trên máy chủ của riêng bạn (chỉ cần đề cập đến tính đầy đủ)

vấn đề tương tự, nhưng không liên quan đến địa lý: /programming/5549068/json-how-do-i-make-cross-domain-json-call


Simon, vui lòng xem Cập nhật # 1 ở trên theo đề xuất của bạn. Cảm ơn.
dùng3657279

0

Kiểm tra các tiêu đề phản hồi của Geoserver trong tab Mạng công cụ Firebird / Chrome Dev để xem liệu tiêu đề Acces-Control-Allow-Origin: * có thực sự ở đó không. Nếu không, vấn đề là ở phía thùng chứa servlet. Hoặc có thể, nếu ứng dụng là nội bộ, hãy thiết lập proxy trên máy chủ web chính thay vì bật CORS? Điều thứ hai sẽ có ý nghĩa hơn nếu Geoserver của bạn sẽ được công khai.


Tôi đã kiểm tra các tiêu đề phản hồi bằng cách đi tới Fireorms -> tab "Net" sau đó nhấp vào tab "Tiêu đề". Nó hiển thị 3 phần phụ: Tiêu đề phản hồi, Tiêu đề yêu cầu và Tiêu đề phản hồi từ Cache. Không có đề cập đến "Kiểm soát truy cập-Cho phép-Xuất xứ".
dùng3657279

Tiêu đề Access-Control-Allow-Origin sẽ nằm trong phần phụ Tiêu đề phản hồi. Nếu không, hãy thử cấu hình lại thùng chứa servlet của bạn.
Michal Mackiewicz

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.