CODEWITHSUNDEEP
vue.js
test
test

Reputation: 305

CORS issue with Vue js

I used vuejs, with address http://localhost:8000.

When calling api, I get CORS error. Sid not succeed request headers request

Domain from origin http://localhost:8080 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.

let headers = {
          'Content-Type': 'application/json',
          'Access-Control-Allow-Origin': true,
};

Upvotes: 4

Views: 15895

Answers (2)

Pallav Chanana
Pallav Chanana

Reputation: 667

Three Options

Option 1. Edit Vue.config.js

 module.exports = {
      devServer: {
        proxy: {
          '/api': {
            target: 'http://localhost:8081',
            ws: true,
            changeOrigin: true
          }
        }
      }
    }

Option 2 (Temporary/Test use case)

  1. Use Cors Plugin in chrome Eg- Moseif CORS
  2. Degrade your chrome version less than 71
  3. Use chromium or Canary Browser.

Option 3

  1. Look into your server Cors allowed or not you can add plugin for python cors and annotation for java on server to allow this call.

Upvotes: -1

Piva Gregory
Piva Gregory

Reputation: 502

You need to create a "vue.config.js" with proxy configuration.

Example : 

 module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

Upvotes: 3

Related Questions