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

7
  • Can you show the actual data sent/received, from a network trace or something? Commented Nov 3, 2016 at 4:11
  • @Brad, I add a picture, I'm not sure this is what you want or not. Commented Nov 4, 2016 at 6: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. Commented Nov 4, 2016 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). Commented Nov 7, 2016 at 2:39
  • 1
    @amdouglas, Yes, I add a screenshot about my settings. Commented Nov 7, 2016 at 7:40

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.