I have a Vue.js project wrapped in an Electron app. From one of my components (src/components/MoviesTable.vue), I'm making an axios call to a local JSON file (public/data/multimedia.json), like this:
axios.get('./data/multimedia.json').then(res => {
this.movies = res.data.movies;
})
When I run npm run serve to serve the Vue app, I experience no issues. However, when I build the Electron app, I receive the error:
Access to XMLHttpRequest at '.../multimedia-index-app/dist/data/multimedia.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
I've tried using proxies to no avail. I know that similar questions about CORS have been asked on SO, which offer different solutions, but I'm a noob, and I need clearer instructions than the ones that I've come across.
Please let me know if you require more information. Any help in resolving this problem would be greatly appreciated.
Thanks in advance.
If the JSON file should be bundled with the app, you don't need Axios, you can have Webpack load it:
import movies from './data/multimedia.json';
And use it in the component:
export default {
data() {
return {
movies
}
}
}
Related
I have an app running on http://localhost:8081, which connects to backend running on http://localhost:8080 (the endpoint which it connects to is exactly on http://localhost:8080/stripe).
When I move the backend to heroku, it works fine, but when I want to test it on localhost, I get an error strict-origin-when-cross-origin
Of course, I read this Stack Overflow question: Vue Axios CORS policy: No 'Access-Control-Allow-Origin' and many other articles and they all say the same: create a vue.config.js file and add
module.exports = {
devServer: {
proxy: 'http://localhost:8080/'
}
}
to it. And so I do, but it doesn't help - I'm still getting this error. And now I don't know what to do. Is there any other reason why I keep getting this error?
I am new to Ionic framework (with Vuejs) and trying to make simple Crud app. But due to CORS issues, i can't able to login.
Browser console show XMLHttpRequest at 'http://localproject.test/api/login' from origin 'http://localhost:8100' has been blocked by CORS policy
I tried a lot of different solutions, without success Please help.
Thanks in advance.
You will allow CORS from your backend. If you want to resolve CORS issue from your end you will use ionic HTTP native plugin link. This is not recommended because you can't track requests from your network tab.
my suggestion you need to resolve your CORS issue from your backend.
If your app will be running on browser, use Proxy server.
Example: I want to post to http://localproject.test/api/login.
In package.json, I will add this line:
"proxy": "http://localproject.test/api"
My POST request in Login component:
axios
.post("/login", loginData)
.then((response) => {
...
}
return response.data;
})
.catch((error) => {
...
});
I'm using axios and vue.js to play with the Fortnite Tracker API.
In their documentation it's clearly said that we need to include the "TRN-Api-Key" in header.
I tested with Postman and It works.
And this is my axios function to make the request:
let url = `https://api.fortnitetracker.com/v1/profile/${this.platform}/${this.username}`;
// username and platform are from my Vue Component.
axios.get(url, {
headers: {
"TRN-Api-Key": "xxxxxxxx-xxxx-xxxx-xxxx-xxxx" // of course from my account on their website.
}
})
.then(response => console.log(response.data))
I expect the output in json like in Postman but I had a 404 Error: "Network Error".
And in the Browser Network Debug I can't see the request header 'TRN-Api-Key'.
[EDIT]
If your app is running on a server you can write a short PHP-Script and use curl in it to access the API (I think it's even possible to generate PHPcode from Postman).
Just address this script with axios and submit your platform and usernameproperties to build the right url.
Or have a look at this post alternatively. Maybe the use of an other API like #kecinotrab provided in the acceptet answer will help you too.
Following https://github.com/SimulatedGREG/electron-vue, i run yarn run dev and make a minor change to see how it works.
In electron vue application, i have launch an ajax request in vue component created hook function,
created: function () {
let self = this
this.$http.get('http://example.com/api/hwid/383').then(
function (resp) {
self.title = resp.title
}
)
}
In the vue-electron dev tool, there are following error in the console:
XMLHttpRequest cannot load http://example.com/api/hwid/383. No 'Access- Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9080' is therefore not allowed access.
How to solve that?
Must i set the cross domain in the server side?
Yes, you should add Access-Control-Allow-Origin for localhost on the server side.
Since it's only a browser policy, you eventually can write your own (proxy) server which will get http://example.com/api/hwid/383 data. Then you will request data through your server without any issues.
mounted(){
this.$http.get('http:anotherurl.com/api/data.xml')
.then(function (response) {
console.log(response);
});
}
i get this console error :
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
i test vue-resource with reddit and it worked fine but with this url gives the problem . please help .
The people who set up anotherurl.com have configured it to not allow requests via JavaScript from sites other than their own. This is a feature of HTTP / CORS.
For further reading, the Mozilla documentation explains a little more about what is going on:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Origin
If you are using chrome you can get an extension to ignore xframe-headers. don't know how to solve it in production though
I would say that as vue-resource is deprecated from 2.0 v you should look at newer API like this one here - https://github.com/mzabriskie/axios
Axios is powerful-promise based HTTP client for the browser and node.js