GET net::ERR_SSL_PROTOCOL_ERROR

[rahul37865]

Recently I added Nuxt Security in a Project where i am fetching data from an API URL http://127.0.0.1:8000/api/blog/post/27 It throws error (checked on MS Edge and Google Chrome console)

GET https://127.0.0.1:8000/api/blog/post/27/ net::ERR_SSL_PROTOCOL_ERROR
GET https://127.0.0.1:8000/api/blog/post/27/ net::ERR_SSL_PROTOCOL_ERROR
RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: null, _value: null}

However it works fine on mozilla Firefox without any error

You can easily reproduce it i tested with very minimal code test.vue

<script setup>
  const { data: postDetail } = await useFetch('http://127.0.0.1:8000/api/blog/post/27');
  console.log(postDetail);
</script>

Once i remove nuxt-security module from nuxt config file everything works fine

I think the issue is http it demands https It works with https url https://jsonplaceholder.typicode.com/posts/1

[Baroshem]

Hey,

I think it can be related to to this header -> https://nuxt-security.vercel.app/security/headers#strict-transport-security

Can you try to disable it to see if it is actually causing your issue on Google Chrome?

Also, quite strange that it works on certain browser -> https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security#browser_compatibility

[rahul37865]

It seems it was the culprit I wrote below setting and cleared cache then it started to work nuxt.config.ts

 security: {
    headers: {
      strictTransportSecurity: 'max-age=0;' 
    },
  },

I believe cache is also having role here becoz now whether i have strictTransportSecurity: 'max-age=0;' set or not it is working. So remember to clear cache or try in different browser and do not forgot to remove this code on Production environment. Thanks for quick response @Baroshem

[Baroshem]

Always happy to help :)

Feel free to open an issue or discussion once you encounter something not clear :)