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?
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.
In case you send Access-Control-Allow-Origin header, remove this and try again.
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: *
