1

I am coding a Vue.js application which uses JotForm api system but I am getting an error while using get request with ApiKey.

Here is my request code: 

axios.get('https://api.jotform.com/user/forms', {
    headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
    'APIKEY': state.apiKey
  } }).then(response => {
  console.log(response)
}).catch((error) => {
  console.log(error)
})

And this is the error message:

Request header field APIKEY is not allowed by Access-Control-Allow-Headers in preflight response

I searched on the web and tried adding various headers. None of them succeed. Also same get request works perfectly with Postman.

Tyler
  • 11,272
  • 9
  • 65
  • 105
Nurullah Macun
  • 472
  • 6
  • 17
  • Possible duplicate of [Request header field Access-Control-Allow-Headers is not allowed by itself in preflight response](https://stackoverflow.com/questions/32500073/request-header-field-access-control-allow-headers-is-not-allowed-by-itself-in-pr) – Terry Sep 20 '17 at 13:51

1 Answers1

0

Chrome blocks request to different domain URL's, one option is to add the CORS plugin to Chrome and enable to work in your local enviroment.

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

For production you should try a different solution like a proxy.

Simon Iribarren
  • 161
  • 1
  • 7
  • Thanks, also i tried axios.get('https://api.jotform.com/user/forms?apiKey=' + state.apiKey, { headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }}) this code and it is worked. – Nurullah Macun Sep 20 '17 at 13:54