Activities

iabukai

iabukai posted a new question

axios-module •

Proxying from https:// to another https://

hi,
I'm trying to call a simple httprequest from https://localhost:3000 to https://somwhereelse:8181

const STORE_URL = 'https://somewhereelse:8181'

export async function storeData (data) {
  const resp = await axios.get(`${STORE_URL}/store`, { data })
  return resp.key
}

I got cors origin request blocked error due to
```Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://somewhereelse:8181/store. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

As I know I should set it at the remote. In this case  https://somewhereelse:8181/store

If I check it then I can see that is already set and it's accepts */*

curl -v -X OPTIONS 'https://somewhereelse:8181/store' -H "Origin:https://localhost:3000" -H "Access-Control-Request-Method: GET,PUT,POST,HEAD,DELETE"

> OPTIONS /store HTTP/2
> Host: somewherelse:8181
> User-Agent: curl/7.65.3
> Accept: */*
> Origin:https://localhost:3000
> Access-Control-Request-Method: GET,PUT,POST,HEAD,DELETE

what should I do differently?

jb-alvarado

jb-alvarado posted a new bug report

axios-module •

bug progress: false, inside "setInterval"

Version

v5.9.3

Reproduction link

https://codesandbox.io/s/codesandbox-nuxt-hu20j

Steps to reproduce

When you ran a post command inside a setInterval functions, the progress will always be visible.

What is expected ?

{ progress: false } should hide the progress bar.

What is actually happening?

The progress bar is shown every time the request is made.

meatherly

meatherly posted a new bug report

axios-module •

bug settings headers in nuxt.config.js doesn't actually add the headers you set

Version

v5.9.0

Reproduction link

https://github.com/meatherly/nuxtjs-axios-bug

Steps to reproduce

Set the common headers in the nuxt.config.js for the axios module. Then make a request with the axios module.

What is expected ?

It should merge the headers you add to the config with the default like the documentation says.

What is actually happening?

The headers are not changing.

Additional comments?

I've created a example repo to recreate the bug.

  • Start up the project.
  • Load the index page.
  • Inspect the request to https://jsonplaceholder.typicode.com/posts/1 in the dev tools.

You should see that the common header set in nuxt.config.js is missing from the request when it shouldn't be.

moleCuleFFF

moleCuleFFF posted a new bug report

axios-module •

bug Typings are incorrect for default axios within context

Version

v5.9.0

Reproduction link

http://nofreakingway.com

Steps to reproduce

const cms: Plugin = (context, inject) => {
console.log((context.app.$axios as AxiosStatic).create());
};

$axios in this instance uses the interface NuxtAxiosInstance which does not include the create method.

What is expected ?

$axios should be an extended instance of AxiosStatic not AxiosInstance

What is actually happening?

$axios is an instance of AxiosInstance

m-eat

m-eat posted a new question

axios-module •

Shopify Storefront API

Hi All,

I want to use axios to connect to my shopify Storefront API which requires a URL and an authentication token.
Please could someone explain to me how to do this or provide an example?

I do not fully understand how to set this up in terms of the options to use etc.

Many thanks in advance.

Kapil

xFEARx

xFEARx posted a new question

axios-module •

transformResponse camelize

Hi, all!
I use Ruby on backend and Nuxt on frontend. With Vue I had config

import axios from 'axios';
import humps from 'humps';

export default axios.create({
baseURL: '/api',
transformResponse: [
…axios.defaults.transformResponse,
data => humps.camelizeKeys(data)
],
transformRequest: [
data => humps.decamelizeKeys(data),
…axios.defaults.transformRequest
]
});

For convert variables(transformResponse) from backend like: requestid to requestId for frontend and vice versa And convert variables(transformRequest) from frontend like: requestId to requestid for backend

With nuxt axios how I can configure the same?

whidy

whidy posted a new question

axios-module •

responsed data not correct

version "5.8.0"

Request for an api from backend, I set axios interceptor as below:

export default function({ $axios, redirect }) {
  $axios.onResponse((response) => {
    if (response.status === 200) {
      console.log('success')
      // console.log('res', response)
      return response.data
    } else {
      // throw.error('backend api request failed')
    }
  })
}

request is ok, but you can see picture that res.data returns '成功', not a correct object.

image

We can find that res.data should return a object like this:

{"code":0,"message":"成功","curPage":1,"pageSize":20,"total":3,"pages":1,"bean":null,"beans":[{"id":6,"belongId":7,"belongAlias":"seo","alias":null,"articleType":"C","articleTitle":"另一篇SEO文章","articleSubtitle":"articleSubtitle","articleSummary":"articleSummary啊啊啊","articleMainBody":"articleMainBody","articleAuthor":"articleAuthor","articleCover":"http://192.168.1.52:3000/image/toolbox.png","articleLabel":"articleLabel","statement":null,"sourceUrl":"sourceUrl","meta":null,"clickNum":0,"exposureNum":0,"status":1,"deleteStatus":false,"createTime":"2019-12-23 17:06:10","updateTime":"2019-12-23 18:23:18"},{"id":4,"belongId":7,"belongAlias":"seo","alias":null,"articleType":"C","articleTitle":"另一篇SEO文章","articleSubtitle":"articleSubtitle","articleSummary":"articleSummary啊啊啊","articleMainBody":"articleMainBody","articleAuthor":"articleAuthor","articleCover":"http://192.168.1.52:3000/image/toolbox.png","articleLabel":"articleLabel","statement":null,"sourceUrl":"sourceUrl","meta":null,"clickNum":0,"exposureNum":0,"status":1,"deleteStatus":false,"createTime":"2019-12-23 17:02:45","updateTime":"2019-12-23 18:23:17"},{"id":1,"belongId":7,"belongAlias":"seo","alias":null,"articleType":"C","articleTitle":"哈哈哈哈测试啊","articleSubtitle":"articleSubtitle","articleSummary":null,"articleMainBody":"articleMainBody","articleAuthor":"articleAuthor","articleCover":"http://192.168.1.52:3000/image/toolbox.png","articleLabel":"articleLabel","statement":null,"sourceUrl":"sourceUrl","meta":null,"clickNum":0,"exposureNum":0,"status":1,"deleteStatus":false,"createTime":"2019-12-23 16:51:40","updateTime":"2019-12-23 18:23:13"}]}

why returns a '成功', this word should be res.message. I waste lot of time on it, anyway, res.data just show an error value, it still work fine.

Kerita

Kerita posted a new question

axios-module •

How to get the browser ip?

I use axios and proxy in my app. If I send a request from the browser, how can the server get the browser ip?

jianming1999

jianming1999 posted a new question

axios-module •

me too

me too

Version
v5.9.0

Steps to reproduce
update this from v5.8.0.

What is expected ?
<= Android 5.1.1 can not use.

What is actually happening?
<= Android 5.1.1 can not use.

Additional comments?
jsless/defu#2

_Originally posted by @jianming1999 in https://github.com/nuxt-community/axios-module/issues/312#issuecomment-568262458_

jianming1999

jianming1999 posted a new question

axios-module •

defu not support android 5.1.1 and babel ignore the module

defu not support android 5.1.1 and babel ignore the module

SunjieZhu

SunjieZhu posted a new question

axios-module •

how to use "headers" in options ?

I tried all possible ways
But it didn't work

joey91133

joey91133 posted a new bug report

axios-module •

bug defu not support IE 11

Version

v5.9.0

Reproduction link

https://google.com

Steps to reproduce

update this from v5.8.0.

What is expected ?

IE 11 can not use.

What is actually happening?

IE 11 can not use.

Additional comments?

https://github.com/jsless/defu/issues/2

MLDMoritz

MLDMoritz posted a new bug report

axios-module •

bug setHeader not working

Version

v5.8.0

Reproduction link

http://example.com

Steps to reproduce

$axios.setHeader('Content-Type', 'application/ld+json', [
    'get',
    'post',
    'delete'
  ])
  $axios.setHeader('Content-Type', 'application/merge-patch+json', 'patch')

Results in a correct config but axios is not picking up the correct headers for the requested method, eg patch.

It uses config.headers['Content-Type'] instead of config.headers.patch['Content-Type']

What is expected ?

Correct header sent on PATCH request

What is actually happening?

PATCH request uses default header

Additional comments?

This is the config.headers object logged in $axios.onRequest:

common: {Accept: "application/ld+json", Authorization: "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJpYX…xhHiztfOFfJ9rIdvhiRz1oUhMm7sSoWrgNNlgOZwCpfJ8Xovw"}
delete: {Content-Type: "application/ld+json"}
get: {Content-Type: "application/ld+json"}
head: {}
post: {Content-Type: "application/ld+json"}
put: {Content-Type: "application/x-www-form-urlencoded"}
patch: {Content-Type: "application/merge-patch+json"}
Content-Type: "application/json;charset=utf-8"

Setting the header in the request itself works fine and sends correct header:

this.$axios
      .$patch(`users/${user.id}`, user, {
        headers: {
          'Content-Type': 'application/merge-patch+json'
        }
      })
oocydo

oocydo posted a new question

axios-module •

Querying serverMiddleware route

Hello all! I'm running Express server on Nuxt app using serverMiddleware. Whenever I try to fetch data from Express using axios.get('/api') I'm getting 404. What can I do? Fetching using axios.get('http://host:port/api') works, however, it's not suitable
Actually, it works once when I reload the app and breaks on all next requests
What is the proper way to do requests to serverMiddleware?
It shows the same behavior both on production and development modes

lromor

lromor posted a new question

axios-module •

store http-only cookies on server side and send them to browser.

I have the following use case:

I have a basic app with nuxt SSR.
At some point, I make an api call to my backend (using proxy:true, withCredentials:true, etc..)
The backend answers setting an http-only cookie in the headers.
The server middleware is the first one making the call to render the page
and correctly receives in its headers the secret cookie

{
 'content-type': 'text/html; charset=utf-8',
  'content-length': '2',
  'set-cookie': [ 'secret_cookie=World; Secure; Path=/' ],
  connection: 'keep-alive'
 }

what I would expect is that
a) axios on the server stores the cookies to be used in the subsequent requests (given I'm using withCredentials:true)
b) the server side rendering sets the received http-only cookies in the rendered page.

Is this supposed to be done manually? Or it should work out of the box with withCredentials?

msonowal

msonowal posted a new bug report

axios-module •

bug Interceptor for 404 with error method not working

Version

v5.8.0

Reproduction link

https://github.com/msonowal/nuxt-bug-reproduce-link

Steps to reproduce

add this in
plugins dir make file name it axios.js

and add the link in nuxt config plugins array
visit any route whose axios calls are 404

axios.js file content below

export default function({ $axios, error }) {
  $axios.onError((responseError) => {
    if (responseError.response.status === 404) {
      error({ statusCode: 404, message: 'Post not found from interceptor' })
    }
  })
}

What is expected ?

show the error response with 404 code as defined in the nuxt app
Post not found from interceptor

but

not redirect to 301

What is actually happening?

it is showing default nuxt error

NuxtServerError
Request failed with status code 404

moshemo

moshemo posted a new question

axios-module •

How to Add a Developer Access Token

This is my first time using nuxt-axios (indeed, my first time using axios). I am trying to sync into the Feedly API. These are the instructions that they offer:

We offer a standard OAuth 2.0 authentication module which provide the application an OAuth access token. Most endpoints expect an Authorization header.

$ curl -H 'Authorization: OAuth [your developer access token]' https://cloud.feedly.com/v3/profile

I am wondering how to translate this to nuxtjs-axios.

So far, what I have done is the following:

// nuxt-config.js
export default {
  ...
  plugins: [{ src: `~/plugins/axios.js` }],
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    credentials: true
  },

  env: {
    FEEDLY_ACCESS_TOKEN:
      [MY_FEEDLY_DEV_ACCESS_TOKEN]
  },
  ...
}

// plugins/axios.js
export default function({ $axios }) {
  $axios.setHeader('Authorization', `OAuth ${process.env.FEEDLY_ACCESS_TOKEN}`)
}

But I am not at all sure that this is the right way to do this.

So my question is, how can I implement this API?

Thanks.

npolyakoff

npolyakoff posted a new question

axios-module •

baseURL concats with localhost

Hello
I have a SPA that must send requests to backend server which locates on another address.

So i overwrite my baseURL in nuxt.config.js:

axios: {
baseURL: 'my_location/api/v1',
},

but when i send requests the actual url looks like this:

"http://localhost:8080/my_location/api/v1/login"

A can't figure out what I did wrong, I read official doc for hours, but still no progress

mrleblanc101

mrleblanc101 posted a new bug report

axios-module •

bug baseUrl default port is :3000 even when nuxt use a random port

Version

v5.8.0

Reproduction link

https://codesandbox.io/

Steps to reproduce

  1. Run nuxt dev when port 3000 is already in use
  2. Nuxt will start on a random port
  3. Do not edit the axios object in nuxt.config.js
  4. Call to localhost will fail because they will use port 3000 instead of random nuxt port

What is expected ?

Axios should use process.env. NUXT_PORT

What is actually happening?

Axios default to port 3000

Additionnal info

I do this because I load json data hosted in the static folder. I can't use import as these fill will be updated regularly via a setInterval

scherpe

scherpe posted a new question

axios-module •

how can i return data in $axios.onResponse ?

code:
// axios.js
$axios.onResponse(response => {
if (response.status === 200) {
let data = response.data;
data.errcode = parseInt(data.errcode);
return data
}
});
how can i return data