0

here is the code

    Vue.mixin(windowMixin)
    export default {
    name: "App",

    methods: {
        getIpAddress(){

            localStorage.getItem('ipAddress') ? '' : localStorage.setItem('ipAddress', Response.data);
            this.$axios.get('https://www.cloudflare.com/cdn-cgi/trace', function(data) {
                console.log(data)
                })
    },
    mounted() {
        this.getIpAddress();
    }
};

Result is telling me that I have saved user's ip address as "undefined" Please help me out, I'm new at Front end

Improve this question
11
  • What is Response.data? Where is that defined? Commented Aug 25, 2020 at 5:27
  • should you get an error because you try to access an property from undefined? also you should check with null instead of "" Commented Aug 25, 2020 at 5:34
  • @Phil I think i wrote it horribly . Can you describe how should codes have been in answer field ? Commented Aug 25, 2020 at 5:45
  • @Ifaruki Yeap i changed it to null Commented Aug 25, 2020 at 5:47
  • Are you only wanting to get the IP address from the CloudFlare API if it's not already in localStorage? Commented Aug 25, 2020 at 6:00

2 Answers 2

Reset to default
3

Parsing the response from CloudFlare's trace API isn't super easy since it is not JSON.

I would use a custom response transformer to parse the data into something usable.

Assuming you want to set the ipAddress in local storage only if it's not there already, try this

methods: {
  async getIpAddress () {
    if (!localStorage.getItem("ipAddress")) {
      const { data: { ip } } = await this.$axios.get("https://www.cloudflare.com/cdn-cgi/trace", {
        responseType: "text",
        transformResponse: data =>
          Object.fromEntries(data.trim().split("\n").map(line => line.split("=")))
      })
      localStorage.setItem("ipAddress", ip)
    }
  }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

It is really working smoothly, But I have to write this function in Vuex too , but there were also Access to XMLHttpRequest at 'https://www.cloudflare.com/cdn-cgi/trace' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response How am i going to fix it ? I have googled it but could not find the solution
Why are you adding an Authorization header?
If you've added an Axios interceptor, please add it to your question. You would need to skip adding additional headers for this particular request and how you do that depends on how you've implemented adding them
2

As above url have cors issue i have come up with new url try this

getIpAddress() {
    this.$axios.get("http://ipinfo.io/json").then(({ data }) => {
    localStorage.getItem("ipAddress")? "" : localStorage.setItem("ipAddress", data.ip);
    });
},
Improve this answer

3 Comments

@Kamlesh Paul I tried , but console was telling me this Access to XMLHttpRequest at 'https://www.cloudflare.com/cdn-cgi/trace' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.
@JakhongirAlikhanov can u check now it should work fine
@KamleshPaul I have tried so many times but not working or maybe I am not good enough to try your code GET http://ipinfo.io/json 403 (Forbidden

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.