問題描述

我有一個使用 (Dropzone js) 上傳的 ajax 文件.它將文件發送到我的 hapi 服務器.我意識到瀏覽器發送了一個 PREFLIGHT OPTIONS METHOD.但我的 hapi 服務器似乎沒有發送正確的響應標頭，所以我在 chrome 上遇到錯誤.這是我在 chrome 上遇到的錯誤

I have an ajax file upload using (Dropzone js). which sends a file to my hapi server. I realised the browser sends a PREFLIGHT OPTIONS METHOD. but my hapi server seems not to send the right response headers so i am getting errors on chrome. here is the error i get on chrome

XMLHttpRequest cannot load http://localhost:3000/uploadbookimg. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

這是 hapi js 路由處理程序

this is the hapi js route handler

server.route({
        path: '/uploadbookimg',
        method: 'POST',
        config: {
            cors : true,
            payload: {
                output: 'stream',
                parse: true,
                allow: 'multipart/form-data'
            },
        handler: require('./books/webbookimgupload'),
        }
    });

據我了解，hapi js 應該從 Pre-fight (OPTIONS) 請求中發送所有 cors 標頭.不明白為什么不是

In my understanding hapi js should send all cors headers from the Pre-fight (OPTIONS) request. Cant understand why its is not

來自 chrome 的網絡請求/響應

Network request /response from chrome

**General**
Request Method:OPTIONS
Status Code:200 OK
Remote Address:127.0.0.1:3000

**Response Headers**
view parsed
HTTP/1.1 200 OK
content-type: application/json; charset=utf-8
cache-control: no-cache
vary: accept-encoding
Date: Wed, 27 Apr 2016 07:25:33 GMT
Connection: keep-alive
Transfer-Encoding: chunked

**Request Headers**
view parsed
OPTIONS /uploadbookimg HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.87 Safari/537.36
Access-Control-Request-Headers: accept, cache-control, content-type
Accept: */*
Referer: http://localhost:4200/books/upload
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

提前致謝

推薦答案

hapi cors: true 是一個通配符規則，允許來自所有域的 CORS 請求，除了少數情況，包括有額外的hapi 的默認白名單之外的請求標頭:

The hapi cors: true is a wildcard rule that allows CORS requests from all domains except for a few cases including when there are additional request headers outside of hapi's default whitelist:

[accept"、authorization"、content-type"、if-none-match"、origin"]

請參閱 API 文檔中路由選項下的 cors 選項部分:

headers - 允許的標頭的字符串數組('Access-Control-Allow-Headers').默認為 ['Accept', 'Authorization', 'Content-Type', 'If-None-Match'].

headers - a strings array of allowed headers ('Access-Control-Allow-Headers'). Defaults to ['Accept', 'Authorization', 'Content-Type', 'If-None-Match'].

additionalHeaders - 附加標頭到標頭的字符串數組.使用它來保留默認標題.

additionalHeaders - a strings array of additional headers to headers. Use this to keep the default headers in place.

您的問題是 Dropzone 發送了幾個標題以及不在此列表中的文件上傳:

Your problem is that Dropzone sends a couple of headers along with the file upload that aren't in this list:

• x-requested-with(不在您上面的標題中，而是為我發送的)
• 緩存控制

• x-requested-with (not in your headers above but was sent for me)
• cache-control

您有兩個選項可以讓事情正常運行，您需要在服務器或客戶端上進行更改:

You have two options to get things working, you need to change something on either the server or the client:

server.route({
    config: {
        cors: {
            origin: ['*'],
            additionalHeaders: ['cache-control', 'x-requested-with']
        }
    },
    method: 'POST',
    path: '/upload',
    handler: function (request, reply) {

        ...
    }
});

選項 2 - 告訴 dropzone 不要發送那些額外的標頭

通過他們的配置尚不可能，但有一個待定的 PR 允許它:https://github.com/enyo/dropzone/pull/685

這篇關于hapi.js Cors Pre-flight 不返回 Access-Control-Allow-Origin 標頭的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！