CORS issue with Vue js

3
votes

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,
};
2
vue.js
Possible duplicate of How does Access-Control-Allow-Origin header work? - Phil
How to run Chrome without CORS. - tao
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
@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

2 Answers

1
votes

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

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.