Der Zugriff auf das Bild unter 'http: //localhost/***.jpg' vom Ursprung 'http: //192.168.*.*' wurde durch die CORS-Richtlinie blockiert: - javascript - Program QA

Der Zugriff auf das Bild unter 'http: //localhost/***.jpg' vom Ursprung 'http: //192.168.*.*' wurde durch die CORS-Richtlinie blockiert:

2020-06-30 javascript html image cors cropperjs

Ich führe eine Web-App aus, die ihre Daten von einem Knotenserver abruft.

Ich habe CORS wie folgt aktiviert:

app.use(function (req, res, next) {
    var allowedOrigins = ['http://localhost:3000', 'http://localhost', 'http://192.168.0.12:3000', 'http://localhost/public/picture.jpg'];
    var origin = req.headers.origin;

    if (allowedOrigins.indexOf(origin) > -1) {
        res.setHeader('Access-Control-Allow-Origin', origin);
    }

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', origin);

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});  

Ich erhalte jedoch eine Fehlermeldung, wenn ich versuche, eine Bildressource in einem Ordner zuzuschneiden, der sich nicht direkt in meinem Projektordner auf dem Server befindet:

Öffentlichkeit
- my_project_root
- picture.jpg

Ich benutze CrpperJs zum Zuschneiden.


Der Fehler:

(index):1 Access to image at 'http://localhost/picture.jpg.jpg?timestamp=1593492757797' from origin 'http://192.168.*.*' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
localhost/picture.jpg?timestamp=1593492757797:1 GET http://picture.jpg?timestamp=1593492757797 net::ERR_FAILED  

Der vollständige HTML-Code:

<div class="container">
<h1>Cropper with full crop box</h1>
<div>
<img id="image" src="http://localhost/picture.jpg" alt="Picture">
</div>
</div>
<script src="../js/cropper.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
    var image = document.querySelector('#image');
    var cropper = new Cropper(image, {
        viewMode: 3,
        dragMode: 'move',
        autoCropArea: 1,
        restore: false,
        modal: false,
        guides: false,
        highlight: false,
        cropBoxMovable: false,
        cropBoxResizable: false,
        toggleDragModeOnDblclick: false,
    });
});
</script>  

Wie kann ich das beheben?

Vielen Dank im Voraus.

Answers

Wenn Sie sich Ihre Fehlermeldung ansehen, haben Sie: Zugriff auf das Bild unter 'http: //localhost/picture.jpg.jpg (double .jpg) und der Ursprung ist nicht der gleiche (IP nicht localhost).

Beheben Sie das und prüfen Sie, ob das funktioniert.

Überprüfen Sie auch, ob Ihre Header wirklich wie vorgesehen gesetzt sind.

Related