0

I wanna upload a file to remote platform, and here is my ajax function, I already set data inside formData.

        $.ajax({
            url: "http://example.com/test/",
            beforeSend: function (xhr) {
                xhr.setRequestHeader("Authorization", key);
            },
            type: "POST",
            data: formData,
            dataType: "json",
            contentType: false,
            processData: false,
            success: function(data) {
                formData.append("access_url", data["data"]["access_url"]);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                  alert("upload falied");
            },
        });

When I use Chrome, the option request look like this:

General
Request URL:http://example.com/test
Request Method:OPTIONS
Status Code:200 OK
Remote Address:59.37.116.14:80


Response Headers
Access-Control-Allow-Credentials:false
Access-Control-Allow-Headers:Authorization
Access-Control-Allow-Methods:PUT,GET,POST,DELETE,HEAD
Access-Control-Allow-Origin:*
Access-Control-Max-Age:100
Connection:keep-alive
Content-Length:30
Content-Type:*/*
Date:Thu, 03 Nov 2016 03:30:17 GMT
Server:nginx

Request Headers
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en,zh;q=0.8,en-US;q=0.6,zh-CN;q=0.4
Access-Control-Request-Headers:authorization
Access-Control-Request-Method:POST
Connection:keep-alive
DNT:1
Host:example.com
Origin:http://127.0.0.1
Referer:http://127.0.0.1/en/apkUpload/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36

When I use Firefox:

General
Request URL:http://example.com/test
Request Method:OPTIONS
Status Code:400 Bad Request
Remote Address:59.37.116.14:80
Version: HTTP/1.1

Response Headers
Access-Control-Allow-Origin:"*"
Connection:"keep-alive"
Content-Length:"42"
Content-Type:"text/html; charset=utf-8"
Date:"Thu, 03 Nov 2016 03:30:17 GMT"
Server:"nginx"

Request Headers
Host: example.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:49.0) Gecko/20100101 Firefox/49.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,zh-CN;q=0.8,zh;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: POST
Access-Control-Request-Headers: authorization
origin: http://127.0.0.1
Connection: keep-alive

I can upload file using Chrome but not Firefox, Safari and Edge. Firefox keep telling me

Reason: CORS preflight channel was not successful

It seems Firefox miss something in response, I read about Firefox CORS, and set

  • Access-Control-Allow-Headers:Authorization
  • Access-Control-Allow-Methods:PUT,GET,POST,DELETE,HEAD
  • Access-Control-Allow-Origin:*

Any idea?

EDIT

enter image description here

EDIT2

When I use firefox:

OPTIONS /files/v1/10000710/uni/test/1219151-294-491055 HTTP/1.1
Host: web.file.myqcloud.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:49.0) Gecko/20100101 Firefox/49.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,zh-CN;q=0.8,zh;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: POST
Access-Control-Request-Headers: authorization
origin: http://127.0.0.1
Connection: keep-alive

HTTP/1.1 400 Bad Request
Server: nginx
Date: Mon, 07 Nov 2016 01:34:51 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 42
Connection: keep-alive
Access-Control-Allow-Origin: *

{"code":-5999,"message":"ERROR_CGI_PARAM"}

When I use Chrome:

OPTIONS /files/v1/10000710/uni/test/258337-900-520822 HTTP/1.1
Host: web.file.myqcloud.com
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://127.0.0.1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36
Access-Control-Request-Headers: authorization
Accept: */*
DNT: 1
Referer: http://127.0.0.1/en/apkUpload/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en,zh;q=0.8,en-US;q=0.6,zh-CN;q=0.4

HTTP/1.1 200 OK
Server: nginx
Date: Mon, 07 Nov 2016 01:52:00 GMT
Content-Type: */*
Content-Length: 30
Connection: keep-alive
Access-Control-Allow-Credentials: false
Access-Control-Allow-Headers: Authorization,authorization,Content-Type,Accept-Encoding,Accept-Encoding,x-requested-with,origin,accept, client-security-token
Access-Control-Allow-Methods: PUT,GET,POST,DELETE,HEAD
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 100

{"code":0,"message":"SUCCESS"}POST /files/v1/10000710/uni/test/258337-900-520822 HTTP/1.1
Host: web.file.myqcloud.com
Connection: keep-alive
Content-Length: 258745
Accept: application/json, text/javascript, */*; q=0.01
Origin: http://127.0.0.1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36
Authorization: F8MSoMEn48fOmZPq1nXlzOy/uAxhPTEwMDAwNzEwJmI9dW5pJms9QUtJRHhwUUlhREFKVmdKWFFtYzZqN1pYOEN1YnBCMU9DbmxPJmU9MTQ3ODQ4MzY3My44ODIwOTAzJnQ9MTQ3ODQ4MzA3MyZyPTkzNzc5NDM5MCZmPQ==
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryIkmhn80tQFpVOkj2
DNT: 1
Referer: http://127.0.0.1/en/apkUpload/
Accept-Encoding: gzip, deflate
Accept-Language: en,zh;q=0.8,en-US;q=0.6,zh-CN;q=0.4

------WebKitFormBoundaryIkmhn80tQFpVOkj2
Content-Disposition: form-data; name="insertOnly"

1
------WebKitFormBoundaryIkmhn80tQFpVOkj2
Content-Disposition: form-data; name="op"

upload
------WebKitFormBoundaryIkmhn80tQFpVOkj2
Content-Disposition: form-data; name="filecontent"; filename="......_web.......apk"
Content-Type: application/octet-stream

It seems firefox didn't send any data in the request, is something about the Formdata api?

EDIT3

add server settings: enter image description here

Community
  • 1
  • 1
Windsooon
  • 6,864
  • 4
  • 31
  • 50
  • Can you show the actual data sent/received, from a network trace or something? – Brad Nov 03 '16 at 04:11
  • @Brad, I add a picture, I'm not sure this is what you want or not. – Windsooon Nov 04 '16 at 06:24
  • Close. Since you're using Wireshark, right click on that and hit Follow TCP Stream. That should give you the full conversation back and forth. I'm trying to figure out why you're getting a bad request response... and whether or not you actually have a bad request. – Brad Nov 04 '16 at 16:03
  • Do you have any control over the remote service? It looks like the `Access-Control-Allow-Methods` is malformed ([Firefox requires that the list of allowed request types be comma delimited in order to initiate CORS request](http://stackoverflow.com/questions/24514666/why-is-this-cors-request-failing-only-in-firefox)). – AM Douglas Nov 07 '16 at 02:39
  • 1
    @amdouglas, Yes, I add a screenshot about my settings. – Windsooon Nov 07 '16 at 07:40
  • @Windsooon: can you add `OPTIONS` to Methods along with `PUT,GET,POST,DELETE,HEAD`? – AM Douglas Nov 07 '16 at 07:49
  • @amdouglas, No, I can't. – Windsooon Nov 07 '16 at 08:34

0 Answers0