Access to XMLHttpRequest has been blocked by CORS policy

filippodicostanzo commented 3 years ago

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
  },

devzom commented 3 years ago

@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

ImSeaWorld commented 2 years ago

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.

nuxt-community / axios-module

Access to XMLHttpRequest has been blocked by CORS policy #511