search

formio / formio.js

JavaScript powered Forms with JSON Form Builder
https://formio.github.io/formio.js
MIT License
1.9k stars 1.07k forks source link

[Question] How to modify global headers #4915

Closed namti closed 9 months ago

namti commented 2 years ago

Environment

Expected behavior

The API for the select component needs access-key header to authenticate.

I followed the document and found there is Headers option could be modified. https://help.form.io/developers/form-renderer#overriding-behavior

The request headers should include access-key: xxxxxxxxxxxxx

Observed behavior

No access-key header sent.

Example

<!doctype html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/formiojs@4.14.9/dist/formio.form.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col">
                    <div id="formio"></div>
                    <script src="https://cdn.jsdelivr.net/npm/formiojs@4.14.9/dist/formio.form.min.js"></script>

                    <script>

                        const form_json = {
                            "components": [
                                {
                                    "label": "Select",
                                    "labelPosition": "top",
                                    "widget": "choicesjs",
                                    "placeholder": "",
                                    "description": "",
                                    "tooltip": "",
                                    "customClass": "",
                                    "tabindex": "",
                                    "hidden": false,
                                    "hideLabel": false,
                                    "autofocus": false,
                                    "disabled": false,
                                    "tableView": true,
                                    "modalEdit": false,
                                    "multiple": false,
                                    "dataSrc": "url",
                                    "data": {
                                        "values": [
                                            {
                                                "label": "",
                                                "value": ""
                                            }
                                        ],
                                        "resource": "",
                                        "json": "",
                                        "url": "https://jsonplaceholder.typicode.com/posts",
                                        "headers": [
                                            {
                                                "key": "",
                                                "value": ""
                                            }
                                        ],
                                        "custom": ""
                                    },
                                    "valueProperty": "",
                                    "dataType": "",
                                    "template": "<span>{{ item.title }}</span>",
                                    "searchEnabled": true,
                                    "selectThreshold": 0.3,
                                    "readOnlyValue": false,
                                    "customOptions": {
                                        "searchResultLimit": 999
                                    },
                                    "persistent": true,
                                    "protected": false,
                                    "dbIndex": false,
                                    "encrypted": false,
                                    "clearOnHide": true,
                                    "customDefaultValue": "",
                                    "calculateValue": "",
                                    "calculateServer": false,
                                    "allowCalculateOverride": false,
                                    "validateOn": "change",
                                    "validate": {
                                        "required": false,
                                        "customMessage": "",
                                        "custom": "",
                                        "customPrivate": false,
                                        "json": "",
                                        "strictDateValidation": false,
                                        "multiple": false,
                                        "unique": false
                                    },
                                    "unique": false,
                                    "errorLabel": "",
                                    "key": "select",
                                    "tags": [],
                                    "properties": {},
                                    "conditional": {
                                        "eq": "",
                                        "json": "",
                                        "show": null,
                                        "when": null
                                    },
                                    "customConditional": "",
                                    "logic": [],
                                    "attributes": {},
                                    "overlay": {
                                        "style": "",
                                        "page": "",
                                        "left": "",
                                        "top": "",
                                        "width": "",
                                        "height": ""
                                    },
                                    "type": "select",
                                    "indexeddb": {
                                        "filter": []
                                    },
                                    "selectValues": "result",
                                    "selectFields": "",
                                    "searchField": "",
                                    "minSearch": 0,
                                    "filter": "",
                                    "limit": 100,
                                    "refreshOn": "",
                                    "redrawOn": "",
                                    "input": true,
                                    "disableLimit": false,
                                    "prefix": "",
                                    "suffix": "",
                                    "showCharCount": false,
                                    "showWordCount": false,
                                    "allowMultipleMasks": false,
                                    "clearOnRefresh": false,
                                    "lazyLoad": true,
                                    "authenticate": false,
                                    "searchThreshold": 0.3,
                                    "fuseOptions": {
                                        "include": "score",
                                        "threshold": 0.3
                                    },
                                    "id": "e6idiqa",
                                    "defaultValue": "",
                                    "sort": ""
                                }
                            ]
                        };

                        Formio.Headers(new Headers({ 'access-key': 'random-string-here' })); // modify global request header for all http requests made by formio.
                        Formio.createForm(document.getElementById('formio'), form_json);
                    </script>
                </div>
            </div>
        </div>
    </body>
</html>
edwinanciani commented 2 years ago

Could you confirm if you are trying to set the Header in the select component request? Because that is part of the choices.js and Select Component configuration.

namti commented 2 years ago

The header access-key value changes every time when the form is rendered. A form may contain many select components or different components that load data from APIs. It would be great to be able to set global request headers.

olgabann commented 9 months ago

We're currently addressing a backlog of GitHub issues. Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!