Question 160425 in Javascript Question posted in
A very good W3school tutorial can be found here.

“Why is there an Access-Control-Allow-Origin error in Vue.js Javascript?”

Access to XMLHttpRequest at
‘https://api.ciuvo.com/api/analyze?url=http%3A%2F%2Flocalhost%3A8080%2F&version=2.1.4&tag=threesixty&uuid=8B61AA73-3715-4EE1-95DD-65ED24AFC1CC’
from origin ‘http://localhost:8080’ has been blocked by CORS policy:
No ‘Access-Control-Allow-Origin’ header is present on the requested
resource.

Everything was okay, but suddenly I am getting this error on my vue.js project today.
Anyone knows why?

Tags:

2

Answers


  1. 0

    Plese put your code for request, if you send "Access-Control-Allow-Origin" header, remove this and try again.

    Edit:
    In server side must allow client to send this header, if you have access already, add this header to your request:

    Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Headers: *
    Login or Signup to reply.
  2. 0

    From what I’ve understood, this error message indicates that your Vue.js application is trying to make a request to a domain (https://api.ciuvo.com) that is different from the one where your application is hosted (http://localhost:8080). This violates the same-origin policy enforced by web browsers to protect users’ security.

    To solve this issue, you need to add the appropriate Access-Control-Allow-Origin header on the server-side response to allow requests from the origin of your Vue.js application.

    However, since you don’t have control over the https://api.ciuvo.com server, you can use a workaround by using a proxy server to forward requests from your Vue.js application to the target API server.

    One solution is to use the http-proxy-middleware package to set up a proxy in your Vue.js project. Here is the link to the package with installation guide http-proxy-middleware
    .

    Then in your vuejs config file called : vue.config.js add something like this:

    module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.ciuvo.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api/analyze'
        }
      }
    }
  }
}

    But you should also read it docs if something goes wrong or for a better understanding of it api.
    This configuration tells the Vue.js development server to forward any requests with the /api prefix to https://api.ciuvo.com/api/analyze. The changeOrigin option changes the Origin header of the request to the target server’s domain, and pathRewrite option removes the /api prefix from the forwarded request.
    In your Vue.js code, you can now make requests to /api instead of the target server URL.

    If your using fetch api or axios you can do something like this:
    fetch('/api?url=http%3A%2F%2Flocalhost%3A8080%2F&version=2.1.4&tag=threesixty&uuid=8B61AA73-3715-4EE1-95DD-65ED24AFC1CC')

    or

    axios.get('/api?url=http%3A%2F%2Flocalhost%3A8080%2F&version=2.1.4&tag=threesixty&uuid=8B61AA73-3715-4EE1-95DD-65ED24AFC1CC')

    I hope it helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search