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?](https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work) — Phil, May 28 '19 at 07:04
How to [run Chrome without CORS](https://alfilatov.com/posts/run-chrome-without-cors/). — tao, May 28 '19 at 07:04
Possible duplicate of [CORS issue with Vue.js and Nodejs](https://stackoverflow.com/questions/54127155/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](https://stackoverflow.com/questions/53877747/access-control-allow-origin-cors-issue-when-using-vue-js-for-client-side-and-e) — tao, May 28 '19 at 07: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, May 28 '19 at 07:37

score 3 · Answer 1 · answered May 28 '19 at 07:24

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 '19 at 07:24

Piva Gregory

442
2
13

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 – Phil May 28 '19 at 07:25
1

what does 'ws: true' stand for? – Dirk Schumacher May 04 '21 at 12:41

Pallav Chanana · Answer 2 · 2020-06-02T17:26:03.767

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.

CORS issue with Vue js

2 Answers2