CORS issue with Vue js

Question

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

Possible duplicate of How does Access-Control-Allow-Origin header work? — Phil
– Phil, Commented May 28, 2019 at 7:04
Possible duplicate of CORS issue with Vue.js and Nodejs or “Access-Control-Allow-Origin” CORS issue when using Vue.js for client side and Express for server side — tao
– tao, Commented May 28, 2019 at 7:08
@Phil the solution in that page is not working for me. I need a solution to allow cors from vue. I can not update site B (which I am getting to fetch) — test
– test, Commented May 28, 2019 at 7:37

Piva Gregory · Accepted Answer · 2019-05-28 07:24:12Z

3

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

answered May 28, 2019 at 7:24

Piva Gregory

5022 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Phil Over a year ago

This will only work for OP's local dev server. It also means all the requests will need to be to relative /api URLs. localhost:8080 is OP's client-side service, not the API

Dirk Schumacher Over a year ago

what does 'ws: true' stand for?

Pallav Chanana · Accepted Answer · 2020-06-02 17:26:03Z

-1

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)

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

Option 3

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.

edited Jun 2, 2020 at 17:26

answered Jun 2, 2019 at 7:33

Pallav Chanana

6675 silver badges10 bronze badges

Collectives™ on Stack Overflow

CORS issue with Vue js

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related