# Cannot custom headers in webpage when call external API (outside HubSpot)

**URL:** <https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256>\
**Category:** CMS Development\
**Tags:** html, professional\
**Created:** [January 15, 2021, 6:24am UTC](https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256 "2021-01-15T06:24:55Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![team\_mc](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/team_mc/32/68963_2.png) [@team\_mc](https://community.hubspot.com/u/team_mc)\
**Post date:** [January 15, 2021, 6:24am UTC](https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256/1 "2021-01-15T06:24:55Z")

</div>

I created a webpage in HubSpot and used Fetch to call external API (outside HubSpot).

Unfortunately, I discovered the below problems:

1. The custom headers (e.g. adding ‘Authorization’ variable) cannot be passed to external API

2. Even the ‘mode’ property in “Fetch” is set to ‘no-cors’, but it still returned CORS error. It looks like the ‘mode’ property is still ‘cors’.

The coding is as follows:

fetch(“[https://external](https://external)\_domain/api”, {

method: ‘GET’,

mode: ‘no-cors’,

headers: {

‘Content-Type’: ‘application/x-www-form-urlencoded’,

‘Authorization’: ‘abc’

},

})

.then(response =\> {

console.log(response.data);

})

Do you know how to solve these problems in HubSpot page? Thanks

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [January 15, 2021, 1:26pm UTC](https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256/2 "2021-01-15T13:26:16Z")

</div>

Hi [@team\_mc](https://community.hubspot.com/t5/user/viewprofilepage/user-id/149933),

I think because you’re using application/x-www-form-urlencoded (as opposed to application/json; are you sure you don’t want json?) your request is a simple request and therefore doesn’t trigger a preflight check. You don’t need an authorisation header or mode to make a simple request so you can remove them.

With application/x-www-form-urlencoded form data is sent as a long query string so you can use query parameters like so: `https://external_domain/api?name=ferret&color=purple`

---

<div class="post-metadata">

**Author:** ![team\_mc](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/team_mc/32/68963_2.png) [@team\_mc](https://community.hubspot.com/u/team_mc)\
**Post date:** [January 18, 2021, 1:23am UTC](https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256/3 "2021-01-18T01:23:04Z")

</div>

Hi @piersg

Thank you for your reply. Actually, I tried to using application/json before but also fail.

Btw, the external AP requires ‘authorisation’ (token) in the request header and it is not allowed to use query parameters to pass the authorization (token). Thanks!

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [January 18, 2021, 9:52am UTC](https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256/4 "2021-01-18T09:52:10Z")

</div>

Can you link to the documentation of the API you’re trying to access please?

---

<div class="post-metadata">

**Author:** ![team\_mc](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/team_mc/32/68963_2.png) [@team\_mc](https://community.hubspot.com/u/team_mc)\
**Post date:** [January 18, 2021, 12:59pm UTC](https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256/5 "2021-01-18T12:59:22Z")

</div>

Sorry, I cannot share the link because you need to login to get token to access. Thanks!

---

<div class="post-metadata">

**Author:** ![team\_mc](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/team_mc/32/68963_2.png) [@team\_mc](https://community.hubspot.com/u/team_mc)\
**Post date:** [January 21, 2021, 5:29pm UTC](https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256/6 "2021-01-21T17:29:57Z")

</div>

@WendyGoh @piersg

I shared the coding in the post. What other information you needed? Error Message?

If yes, the return message is as follows:

1. **Request Method:** GET
2. **Status Code:** 401
3. **Remote Address:** \<external\_api\_IP\>:443
4. **Referrer Policy:** no-referrer-when-downgrade

I don’t know why no CORS error today (I have NOT updated my coding). But the custom request headers are still cannot pass to external API. I am sure that my login information is correct.

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [January 21, 2021, 6:07pm UTC](https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256/7 "2021-01-21T18:07:12Z")

</div>

I think we need to know what kind of authorization the API is asking for. I imagine it’s an API key, not Bearer authentication, so try the x-api-key first (delete the other one):

```lia-code-sample
fetch("https://external_domain/api", {
 method: 'GET',
 credentials: 'include',
 headers: {
 'Content-Type': 'application/x-www-form-urlencoded',
 // if bearer token
 'Authorization': 'Bearer ' + [your token]
 // else if X-API-KEY
 'X-API-KEY': [your key]
 },
})
.then(response => {
 console.log(response.data);
})

```

`mode: "no-cors"` only allows a limited set of headers in the request: Accept, Accept-Language, Content-Language, and Content-Type. Hopefully the above works.

---

<div class="post-metadata">

**Author:** ![team\_mc](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/team_mc/32/68963_2.png) [@team\_mc](https://community.hubspot.com/u/team_mc)\
**Post date:** [January 22, 2021, 5:25pm UTC](https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256/8 "2021-01-22T17:25:12Z")

</div>

Thank you for your reply! I use Bearer authentication. After testing by your coding, the result is as follows:

**If set mode: “no-cors”, return below error:**

GET’[https://external](https://external)\_domain/api’ net::ERR\_ABORTED 401

Response header:

1. **Request Method:** GET
2. **Status Code:** 401
3. **Remote Address:** \<external\_api\_IP\>:443
4. **Referrer Policy:** no-referrer-when-downgrade

**If set mode: “cors”, return below error:**

“Access to fetch at ‘[https://external](https://external)\_domain/api’ from origin ‘[https://hubspot-demo.mydomain.com](https://hubspot-demo.mydomain.com)’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘\*’ when the request’s credentials mode is ‘include’.”

No returen response header.

Thanks!

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [January 22, 2021, 9:29pm UTC](https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256/9 "2021-01-22T21:29:09Z")

</div>

And what do you get if you use “credentials” instead of “mode”?

---

<div class="post-metadata">

**Author:** ![team\_mc](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/team_mc/32/68963_2.png) [@team\_mc](https://community.hubspot.com/u/team_mc)\
**Post date:** [January 25, 2021, 4:14am UTC](https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256/10 "2021-01-25T04:14:57Z")

</div>

I updated the coding as follows:

fetch(“[https://external](https://external)\_domain/api”, {  
method: ‘GET’,  
mode: ‘include’,  
headers: {  
‘Content-Type’: ‘application/x-www-form-urlencoded’,  
// if bearer token  
Authorization’: 'Bearer ’ + [my token]  
},  
})  
.then(response =\> {  
console.log(response.data);  
})

And returned the below errors:

Uncaught (in promise) TypeError: Failed to execute ‘fetch’ on ‘Window’: The provided value ‘include’ is not a valid enum value of type RequestMode.

Thanks!

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [January 25, 2021, 9:06am UTC](https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256/11 "2021-01-25T09:06:38Z")

</div>

Because it has to be **credentials: 'include** ’ not “mode”

---

<div class="post-metadata">

**Author:** ![team\_mc](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/team_mc/32/68963_2.png) [@team\_mc](https://community.hubspot.com/u/team_mc)\
**Post date:** [January 25, 2021, 5:07pm UTC](https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256/12 "2021-01-25T17:07:44Z")

</div>

@piersg From your reply - “And what do you get if you use “credentials” instead of “mode”?” , you suggested to change “credentials” to “mode”, right? If not, what do you mean? Could you post the whole coding? Thanks!

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [January 25, 2021, 5:12pm UTC](https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256/13 "2021-01-25T17:12:11Z")

</div>

I meant change the property ‘mode’ for the property ‘credentials’.

```lia-code-sample
fetch("https://external_domain/api", {
 method: 'GET',
 credentials: 'include',
 headers: {
 'Content-Type': 'application/x-www-form-urlencoded',
 'Authorization': 'Bearer ' + [your token]
 }
})
.then(response => {
 console.log(response.data);
})

```

---

<div class="post-metadata">

**Author:** ![team\_mc](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/team_mc/32/68963_2.png) [@team\_mc](https://community.hubspot.com/u/team_mc)\
**Post date:** [January 25, 2021, 5:19pm UTC](https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256/14 "2021-01-25T17:19:33Z")

</div>

@piersg

Updated the coding as your coding, and return the below error:

Access to fetch at “[https://external](https://external)\_domain/api” from origin ‘[https://hubspot-demo.mydomain.com](https://hubspot-demo.mydomain.com)’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘\*’ when the request’s credentials mode is ‘include’.

Thanks!

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [January 25, 2021, 5:26pm UTC](https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256/15 "2021-01-25T17:26:01Z")

</div>

Ok, that would suggest the Access-Control-Allow-Origin is set to wildcard (\*) i.e. code from any origin can access the API. As it states, you can’t have credentials when that is set to wildcard. What do you get if you remove credentials?

```lia-code-sample
fetch("https://external_domain/api", {
 method: 'GET',
 headers: {
 'Content-Type': 'application/x-www-form-urlencoded',
 'Authorization': 'Bearer ' + [your token]
 }
})
.then(response => {
 console.log(response.data);
})

```

---

<div class="post-metadata">

**Author:** ![team\_mc](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/team_mc/32/68963_2.png) [@team\_mc](https://community.hubspot.com/u/team_mc)\
**Post date:** [January 26, 2021, 1:51am UTC](https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256/16 "2021-01-26T01:51:04Z")

</div>

@piersg

Updated the coding as your coding, and return the below error in  
Header General:

1. Request URL: [https://external\_domain/api](https://external_domain/api)
2. Request Method: OPTIONS
3. Status Code: 204

And no response data

Thanks!

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [January 26, 2021, 9:17am UTC](https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256/17 "2021-01-26T09:17:47Z")

</div>

Well 204 error is saying that the server has successfully fulfilled the request and that there is no content to send in the response payload body. So your code works, but there’s nothing being returned from the API.

---

<div class="post-metadata">

**Author:** ![team\_mc](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/team_mc/32/68963_2.png) [@team\_mc](https://community.hubspot.com/u/team_mc)\
**Post date:** [January 27, 2021, 3:38pm UTC](https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256/18 "2021-01-27T15:38:41Z")

</div>

Hi @piersg I did not update my coding but it works today. Anyways, thank you for your help!

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [January 27, 2021, 3:49pm UTC](https://community.hubspot.com/t/cannot-custom-headers-in-webpage-when-call-external-api-outside-hubspot/30256/19 "2021-01-27T15:49:33Z")

</div>

No worries, glad we got there in the end! Could you mark one of the comments as the solution please? Whichever helped the most (maybe [this](https://community.hubspot.com/t5/CMS-Development/Cannot-custom-headers-in-webpage-when-call-external-API-outside/m-p/402896/highlight/true#M20736) one)?