Question

50

Fetch: post json data, application/json change to text/plain

rated 0 times [ 51] [ 1] / answers: 1 / hits: 19145 / 8 Years ago, sun, september 25, 2016, 12:00:00

I'm using chrome 53.0.2785.116 m (64-bit).

I got the following headers on devtools. The problem is marked with a // comment. content type is really not allowing us to set it to application/json, I have tried a 100 different ways.

import fetch from 'isomorphic-fetch';

const option = {

    method: 'POST',

    mode: 'no-cors',

    headers: {

      'Accept': 'application/json',

      'Content-Type': 'application/json'

    },

    body: JSON.stringify({'aa':'bb'})

}

fetch('/books', opts)

.then(check401)

.then(check404)

.then(jsonParse)

.then(errorMessageParse);

Request Headers

accept:application/json

Accept-Encoding:gzip, deflate

Accept-Language:zh-CN,zh;q=0.8

Connection:keep-alive

Content-Length:97

content-type:text/plain;charset=UTF-8 //What happen?

Host:127.0.0.1:8989

Origin:http://127.0.0.1:8989

Referer:http://127.0.0.1:8989/

User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

neildrews

Add To Favorites

Follow

Total Points: 166

Total Questions: 103

Total Answers: 85

Location: Moldova

Member since Sat, Aug 6, 2022

2 Years ago

neildrews questions

1 scrollIntoView() doesn't scroll anywhere

Fri, Feb 18, 22, 00:00, 2 Years ago

1 MUI - makeStyles - Cannot read properties of undefined

Tue, Oct 12, 21, 00:00, 3 Years ago

1 How to select an option of a slim select with jquery

Tue, Mar 23, 21, 00:00, 3 Years ago

1 Angular: How to refresh a part of html ( form / div / table )

Wed, Aug 19, 20, 00:00, 4 Years ago

1 How to access plugin from nuxt.js store?

Sun, Aug 16, 20, 00:00, 4 Years ago

View All

answered 8 Years ago asalewisc · Accepted Answer

The problem is that when you work in 'mode' 'no-cors', the Headers become an immutable and you will not be able to change some of its entries. One of the heads you can't change is the Content-Type. When you set 'mode' to 'no-cors' you will be able to change only these headers:

Accept

Accept-Language

Content-Language

Content-Type and whose value, once parsed, has a MIME type (ignoring parameters) that is application/x-www-form-urlencoded, multipart/form-data, or text/plain

In another words, in 'mode' '-no-'cors' you can only set application/x-www-form-urlencoded, multipart/form-data, or text/plain to the Content-Type.

So the solution is stop using fetch or changing it to 'cors' 'mode'. Of course this will only works if your server also accepts 'cors' requests.

Here is an example of how you could enable CORS in an Apache Server

SetEnvIfNoCase Access-Control-Request-Method (GET|POST|PUT|DELETE|OPTIONS) IsPreflight=1

SetEnvIfNoCase Origin .* AccessControlAllowOrigin=$0

SetEnvIfNoCase Origin https://(url1.com|url2.com)$ AccessControlAllowOrigin=$0



Header always set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin

Header always set Access-Control-Allow-Methods GET, POST, PUT, DELETE, OPTIONS env=IsPreflight

Header always set Access-Control-Allow-Headers Content-Type, Authorization, Accept, Accept-Language env=IsPreflight

Header always set Access-Control-Max-Age 7200 env=IsPreflight

RewriteCond %{REQUEST_METHOD} OPTIONS

RewriteCond %{ENV:IsPreflight} 1

RewriteRule ^(.*)$ $1 [R=204,L]

The above code will inject the CORS headers in the response when its necessary.
With this code your server will allow CORS only from the the domains url1.com or url2.com.

Here are some references

https://developer.mozilla.org/en-US/docs/Web/API/Request/mode

https://fetch.spec.whatwg.org/#simple-header