Hey, I tried to use this Axios example: <https://g...

# javascript

[Hildebrandt Tobias]

Hey, I tried to use this Axios example:
https://github.com/JetBrains/kotlin-wrappers/blob/master/examples/src/jsMain/kotlin/example/AxiosSearch.kt

But when I try to fill the headers it doesn't work.
I tried

val options = jso<AxiosRequestConfig> {
        url = "/users"
        method = "GET"
        headers = mapOf(
            "Content-Type" to "application/x-www-form-urlencoded"
        )
    }

and also

val options = jso<AxiosRequestConfig> {
        url = "/users"
        method = "GET"
        headers = jso {
            "Content-Type" to "application/x-www-form-urlencoded"
        }
    }

But the headers are never part of the request.

[Artem Kobzar]

Could you please try this:

val options = jso<AxiosRequestConfig> {
        url = "/users"
        method = "GET"
        headers = jso {
            this["Content-Type"] = "application/x-www-form-urlencoded"
        }
    }

[Hildebrandt Tobias]

Hey, thank you for chiming in, sadly it did not work:

[Hildebrandt Tobias]

I noticed that the example uses axios 0.21.1

[Hildebrandt Tobias]

My whole wrapper:

package shared.utils.axios

import js.promise.Promise
import react.Props

@JsModule("axios")
@JsNonModule
external fun <T> axios(config: AxiosRequestConfig): Promise<AxiosResponse<T>>

// Type definition
external interface AxiosRequestConfig {
    var url: String
    var method: String
    var baseURL: String?
    var timeout: Number
    var data: dynamic
    var transferRequest: dynamic
    var transferResponse: dynamic
    var headers: dynamic
    var params: dynamic
    var withCredentials: Boolean
    var adapter: dynamic
    var auth: dynamic
    var responseType: String
    var xsrfCookieName: String
    var xsrfHeaderName: String
    var onUploadProgress: dynamic
    var onDownloadProgress: dynamic
    var maxContentLength: Number
    var validateStatus: (Number) -> Boolean
    var maxRedirects: Number
    var httpAgent: dynamic
    var httpsAgent: dynamic
    var proxy: dynamic
    var cancelToken: dynamic
}

external interface AxiosResponse<T> {
    val data: T
    val status: Number
    val statusText: String
    val headers: dynamic
    val config: AxiosRequestConfig
}

[Artem Kobzar]

I'm not sure that the request you show is related to the config you shown.
Inside the config you have /users path and inside the request /user-settings/general

[Hildebrandt Tobias]

Commando back, when I don't use "Content-Type" and instead "X-Search" it works.

[Hildebrandt Tobias]

The /user-settings/general is just the site from where the request is dispatched. The target of the request is <http://jsonplaceholder.typicode.com/users|jsonplaceholder.typicode.com/users> for debugging purposes.

[Hildebrandt Tobias]

Okay I tested some more, everything works now. Big thanks to @Artem Kobzar

[turansky]

recordOf strictly recommended

[turansky]

And type for headers - ReadonlyRecord<String, String>?

[Hildebrandt Tobias]

Ah thank you for the type. Just curious. How would I have found that out? I looked into the Axios source code for a hint on how to set the headers, but wasn't able to find out much aside from it seemingly being parsed out via reflections or something.

[turansky]

Screenshot 2024-02-12 at 22.05.44.png

[turansky]

I see strict declarations in index.d.ts

[turansky]

Without any (dynamics)

[turansky]

AxiosHeaders - record

[Hildebrandt Tobias]

Ah, thank you. Then I know where to look next time. I didn't even open the index.d.ts

[Hildebrandt Tobias]

Much obliged.