Use of the fetch function-FAQ and faq of the fetch Function

Source: Internet
Author: User

Use of the fetch function-FAQ and faq of the fetch Function

Use of fetch:

Overall format:

Fetch ('url ',


Mode: 'cors ',

Method: 'post ',

Headers :{

'Content-type': 'application/x-www-form-urlencoded; charset = UTF-8 ', [need to specify]


Body: JSON. stringify ({a: '000000 '}),

},). Then ();

Verify that the front and back ends are strings in JSON format.

Note: 'content-type': there are only three types of form encoding formats.

① Text/plain (default): form data in plain text format
② Application/x-www-form-urlencoded and multipart/form-data (form data is encoded as name/value pairs. You do not need to select them in ajax, will help me select the encoding method intelligently. here we need to develop the encoding method)

③ The multipart/form-data Browser splits the entire form into controls.


Among them, the main problems encountered by the frontend and backend communication using fetch are their cross-domain problems, and the pitfalls that I will not learn for a long time in c.

Here I will share my problems and solutions:


(1) fetch request 415 UnsupportedMedia Type problem [see Figure]: Here we only need to modify the encoding Type.

'Content-type': 'application/x-www-form-urlencoded; charset = UTF-8 ',



(2) 401 Unauthorized: no access permission. Deploy IIS and enable Anonymous Access.

Note network (you must re-enable Anonymous Access for each redeployment)


It will still be output in the console

However, the core issue is not cross-origin. Let's take a look at the cross-origin issue.

(3) 405 Method Not Allowed cross-origin access :( cause: access other services by localhost: 3000 under react Service)

Console or output

It is found that there is no Code State and sometimes the problem is more accurate.

Here we provide a solution to the Cross-origin problem of webapi: Recommended Link



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.