[QUESTION] proxy a client request to the nuxt server ?

[tiretdusix]

Hello 👋

I have a simple stupid question, I'm trying to lazy-load a RSS feed in a Nuxt.js app ( when intersecting an observer ).

The RSS is not hosted on a domain i own, and as it was kind of expected i hit the CORS wall.

I would like to know if nuxt-community / proxy-module can help me proxy the query to my Nuxt server instead ? ( but still trigger from the client, not at server render time )

+-------------+ +----> +------------+
| NUXT SERVER |        |  RSS FEED  |
+-------------+ <----+ +------------+

     +   ^
     |   |
     v   +

+-------------+
| NUXT CLIENT |
+-------------+

I read some people use express alongside Nuxt for this sort of things ?

Thanks ! Good day ! ✨🏔

[atinux]

This is the purpose of the proxy module @tiretdusix, to go through the Nuxt server to hit the origin API and avoid CORS in the client-side.

[tiretdusix]

This is wonderful. 😄

I am currently failing - axios keeps sending request to my api instead of the nuxt server - but i will keep on trying. I think my configuration is incorrect at the moment.

Once i got this working it will post my solution here so i could eventually help other people. 🤝

🇫🇷 En vous souhaitant une bonne journée depuis les Yvelines !

Bye 👋

[tiretdusix]

Hello.

Currently i cannot have it working. I believe i do not understand the working principle and/or how to configure it.

I don't know how i'm supposed to call this proxied path. Am i supposed to use my nuxt's $axios ? or the fetch api ? 🤔

const { rss } = await fetch('https://localhost:3000/rss/dyn/breaking_news.rss'); const { rss } = await this.$axios.get('/rss');

It tried

  ['@nuxtjs/proxy', {
    '/rss': 'https://www.nasa.gov',
  }],

or

  ['@nuxtjs/proxy', {
    '/rss': 'https://cocorico-front.local:3000/rss/dyn/breaking_news.rss',
  }],

I'm sorry about the situation but the lack of a single exemple use-cse makes it difficult to understand what this module is up to. 🤷‍♂️

Both cases the server redirect to /en/rss (nuxt-i18n in action) and falls in 404.

I'm looking for help with a use-case example please. Have a good day, cheers ! 🥂

[atinux]

Do you mind creating a small CodeSandBox with your example by forking https://template.nuxtjs.org ?

This would speed up the help process :)

[farnabaz]

@tiretdusix Define your config on top level of your nuxt.config.js.

export default {
  modules: [
    "@nuxtjs/proxy"
  ],
  proxy: {
    "/rss": "https://blog.codinghorror.com"
  }
}

Then you can use both fetch and $axios

await fetch('/rss')
await this.$axios.$get('/rss')

Update: Seems that module does not work properly with array options. see https://github.com/nuxt-community/proxy-module/blob/master/src/index.ts#L14 \cc @Atinux

[tiretdusix]

Hello. Thank you for your answers.

Unfortunately @Atinux this project is quite large and involves a lot of modules and dependencies that may interfere. Not sure i could share a CodeSandBox that would reflect my situation.

I made some test this morning and figured out a couple things.

Options

First - as said @farnabaz - passing configuration as options argument of module entry had no effect.

['@nuxtjs/proxy', {
     "/getme": {
         target: "https://www.nasa.gov/rss/dyn/breaking_news.rss",
         changeOrigin: true,
     }
}], // has no effect

I since moved this to a dedicated proxy configuration node and now it works - sort of. This line below appeared :

ℹ [HPM] Proxy created: /getme  -> https://www.nasa.gov/rss/dyn/breaking_news.rss     

Good 🙂

Axios

Whatever i tried - i could not have a proxy working with Axios await this.$axios.$get('/getme'). It always tries to call my API instead :

404 https://localhost:3000/api/v1/getme

I tried adding my Axios API prefix into the proxy path like so - hoping this would be catched :

proxy: {
  "/api/v1/getme": {
    target: "https://www.nasa.gov/rss/dyn/breaking_news.rss",
    changeOrigin: true,
  }
}

... but the result was identical.

Knowing i already got an Axios listener going on thanks to nuxt-i18n - i tried swaping the two modules :

modules: [ ... '@nuxtjs/proxy', 'nuxt-i18n', ...  ]
  // or 
modules: [ ... 'nuxt-i18n', '@nuxtjs/proxy', ...  ]

... Same result.

I started a brand new blank Nuxt app and made my test aside without API prefixes or nuxt-i18n

For some reason the redirection was happening in the browser. I got a 301 as a response and the browser kept on making request to nasa.gov.

Fetch

Fetch on the other hand did work await fetch('/getme') :

202 https://localhost:3000/getme

To sum things up

• do not use module options for configuration
• use proxy key options
• axios may not work for some reasons
• fetch will apparently work
• you may have browser 301 redirects instead of server-proxied response ?

This redirection must be dynamic in my project ; The amount of troubles having to configure the proxy lead me to gave up on nuxtjs/proxy. We will use our Symfony server to proxy the response this time around.

Maybe next time will be the one.

Have a good week. Signing off. 👋

[atinux]

Thank you very much for your feedback @tiretdusix and sorry to hear that @nuxtjs/proxy did not work for your use case.