axios-module icon indicating copy to clipboard operation
axios-module copied to clipboard

Access to XMLHttpRequest has been blocked by CORS policy

Open filippodicostanzo opened this issue 3 years ago • 2 comments

I trying to make a POST call to external service with axios to a external service and the response is this:

Access to XMLHttpRequest at 'https://reqbin.com/echo/post/json' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I'm developing on localhost:3000.

This is the code of post method

        this.$axios.$post('https://reqbin.com/echo/post/json',{
          "Id": 78912,
          "Customer": "Jason Sweet",
          "Quantity": 1,
          "Price": 18.00
        });

If I try to get a call it works.

Also if I try the post call with POSTMAN everything works.

Do you have any suggestions? I also configured the config.json file under axios in this way but it still doesn't work

  axios: {
    baseURL: 'https://reqbin.com',
    proxyHeaders: false,
    credentials: false
  },

filippodicostanzo avatar Jun 15 '21 11:06 filippodicostanzo

@filippodicostanzo You should use the proxy options of axios

Check this https://stackoverflow.com/q/60943279/10900851

"Options - Axios Module" https://axios.nuxtjs.org/options/#proxy

devzom avatar Aug 31 '21 21:08 devzom

This happens to me. No fix in sight, these nuxt module off-shoots are terribly maintained. Proxy is not even a logical fix for this issue, I'm never using nuxt on a project again. Back to inertiajs for me I guess.

ImSeaWorld avatar May 16 '22 20:05 ImSeaWorld