मैं अनुसरण के रूप में .net कोर 2 में फ़ाइलें अपलोड करने के लिए एक एपीआई अंत बिंदु बना रहा हूँ

 [HttpPost("{userId}/files")]
    public async Task<IActionResult> AddUserFile([FromRoute]string userId)
    {
        var file = Request.Form.Files.FirstOrDefault();

        var myFile = new MyFiles
        {
            FilePath = await UploadFile(file), // save the file and return url
            UserId = userId,
            FileName = Request.Form["fileName"],
            Description = Request.Form["description"]
        };

        // todo save file to database

        return Ok(myFile);
    }

मैंने पोस्टमैन का उपयोग करके इस अंतिम बिंदु का परीक्षण किया और यह अपेक्षा के अनुरूप काम करता है।

जब इस अंतिम बिंदु को एक कोणीय अनुप्रयोग से फॉलो करने की कोशिश की गई

onAddFile(form: NgForm) {

   const formData: FormData = new FormData();
   formData.append('', this.selectedFile);
   formData.append('fileName', form.value.fileName);
   formData.append('description', form.value.description);
   formData.append('userId', this.userId);

   const headers = new Headers();
   headers.append('accept-language', 'en');
   headers.append('Content-Type', 'multipart/form-data');
   headers.append('Authorization', `Bearer ${token}`);

   this.http.post(
     `https://localhost:44339/api/admin/users/${this.userId}/files`,
     formData,
     new RequestOptions({ headers: headers })
   ).subscribe(result => {
     console.log(result);
   });
 }

मुझे निम्नलिखित त्रुटि मिलती है

:44339/एपीआई/व्यवस्थापक/उपयोगकर्ता/c6d15e43-00b9-4eda-bac8-635f6017fec9/files:1 पद https://localhost:44339/api/admin/ उपयोगकर्ता/c6d15e43-00b9-4eda-bac8-635f6017fec9/files

संपादित करें:1 XMLHttpRequest लोड नहीं कर सकता https://localhost: 44339/api/admin/users/c6d15e43-00b9-4eda-bac8-635f6017fec9/files। अनुरोध पर कोई 'पहुंच-नियंत्रण-अनुमति दें-उत्पत्ति' शीर्षलेख मौजूद नहीं है संसाधन। उत्पत्ति 'http://localhost:4200' इसलिए अनुमति नहीं है अभिगम। प्रतिक्रिया में HTTP स्थिति कोड 500 था।

enter image description here

और यह कोणीय ऐप से कैप्चर किया गया अनुरोध शीर्षलेख है

:authority:localhost:44339
:method:POST
:path:/api/admin/users/c6d15e43-00b9-4eda-bac8-635f6017fec9/files
:scheme:https
accept:application/json
accept-encoding:gzip, deflate, br
accept-language:en-US,en;q=0.8,ar;q=0.6
authorization:Bearer eyJhbGciOiJIU.........
content-length:21531
content-type:multipart/form-data;
origin:http://localhost:4200
referer:http://localhost:4200/admin/users/c6d15e43-00b9-4eda-bac8-635f6017fec9/edit

और मेरा अनुरोध पेलोड

------WebKitFormBoundaryqB4rbqWsrra0gwhi
Content-Disposition: form-data; name=""; filename="2017-08-22_21-56-02.png"
Content-Type: image/png


------WebKitFormBoundaryqB4rbqWsrra0gwhi
Content-Disposition: form-data; name="fileName"

er
------WebKitFormBoundaryqB4rbqWsrra0gwhi
Content-Disposition: form-data; name="description"

df
------WebKitFormBoundaryqB4rbqWsrra0gwhi
Content-Disposition: form-data; name="userId"

c6d15e43-00b9-4eda-bac8-635f6017fec9
------WebKitFormBoundaryqB4rbqWsrra0gwhi--

समस्या का पता लगाने की कोशिश करते समय मैंने देखा कि यह तभी होता है जब अनुरोध content-type multipart/form-data है, जिसका उपयोग मुझे इस मामले में फ़ाइल अपलोड करने में सक्षम होने के लिए करना है।

मैं यहाँ क्या याद कर रहा हूँ, क्या मैं कोणीय में कुछ गलत कर रहा हूँ या मैं सर्वर साइड एपीआई में एक कॉन्फ़िगरेशन से चूक गया हूँ?


संपादित करें:

स्टार्टअप में कॉर्स कॉन्फ़िगरेशन

  app.UseCors(builder =>
                builder
                    .AllowAnyHeader()
                    .AllowAnyMethod()
                    .AllowAnyOrigin()
                    .AllowCredentials()
            );
0
Mohamed Badr 15 सितंबर 2017, 16:34

3 जवाब

सबसे बढ़िया उत्तर

मैं अंत में इस मुद्दे को दूर करने में सक्षम था, हेडर से सामग्री प्रकार को हटाने के लिए फिक्स है

headers.delete('Content-Type');

इसे खाली न छोड़ें इससे त्रुटि होगी

गलत सामग्री-प्रकार: , मल्टीपार्ट/फॉर्म-डेटा; सीमा

1
Mohamed Badr 16 सितंबर 2017, 13:55

A.Tim द्वारा सुझाए गए अनुसार आपको CORS को बैकएंड पर सक्षम करना होगा। स्प्रिंग आधारित ऐप के लिए जावा में यह कैसे किया जाता है।

public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurerAdapter() {
        @Override
        public void addCorsMappings(CorsRegistry corsRegistry) {
            corsRegistry.addMapping("/**").allowedMethods("*").allowedHeaders("*").allowedOrigins("*");
        }
    };
}
0
H S Raju 15 सितंबर 2017, 17:07

मेरा मानना ​​​​है कि आपके पास कोणीय के http url में एक टाइपो है:

https://localhost:44339/api/admin/users/${this.userId }/फ़ाइलें

यह होना चाहिए (बंदरगाह पर ध्यान दें)

https://localhost:4200/api/admin/users/${this.userId }/फ़ाइलें

या बेहतर अभी तक, एक सापेक्ष यूआरएल का उपयोग करें ताकि मेजबान की स्वचालित रूप से गणना की जा सके।

यदि आप वास्तव में इन 2 ऐप्स को लोकलहोस्ट में चला रहे हैं, तो सुनिश्चित करें कि पोर्ट 44339 में CORS कॉन्फ़िगर किया गया है।

Chrome इस त्रुटि को इसलिए फेंक रहा है क्योंकि आप किसी भिन्न पोर्ट में होस्ट को अनुरोध भेज रहे हैं। ध्यान दें कि केवल परीक्षण उद्देश्यों के लिए आप क्रोम में स्थानीय रूप से इस सुरक्षा उपाय को अस्थायी रूप से अक्षम कर सकते हैं, यदि आपके पास विंडोज प्रेस विन + आर है और फिर निष्पादित करें:

क्रोम --अक्षम-वेब-सुरक्षा --उपयोगकर्ता-डेटा-डीआईआर

(आपको पहले पोस्टमैन सहित सभी क्रोम इंस्टेंस को बंद करना होगा)

0
Axel Márquez 16 सितंबर 2017, 06:03