CORS error while importing a js file in my web based html script in vue js
Question
Im trying to call api from inside vue instance inbuilt methods
But its showing me some error
Im in my training period and this is all new to me
Errors: Access to script at 'file:///home/wohlig/Documents/Projects/Training/Rough/Vue/apicalling/app.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
GET file:///home/wohlig/Documents/Projects/Training/Rough/Vue/apicalling/app.js net::ERR_FAILED
Im trying to retrieve data from my database
app.html
<html>
<head>
<script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div>
</div>
<script type="module">
import { nav } from './app.js'
var vm = new Vue({
data: {
datas:"gsdgsdg"
},
created(){
nav.getOneId(function (err, data){
if(data){
console.log("afasfsafasfasf+++++++++="+data)
}
})
console.log("dfafasdfadf")
}
})
</script>
</body>
</html>
app.js
import axios from "axios";
var adminUrl = "http://localhost:3000/";
export default {
getOneId: callback => {
return axios
.get(adminUrl + "movie/getOneId/5d9d736963a1f027693e7fae", {})
.then(data => {
callback(null, data);
})
.catch(err => {
callback(err);
});
}
}
2 answers
solution1
0 2019-10-19 12:10:54
Try using this piece of line in package.json "proxy": " http://192.165.1.220:28080 ",
where this host and port will be of walmart and install "http-proxy-middleware" using npm and try again.
CORS: EXPLANATION Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own.Means your localhost is trying to connect other domain so for security purpose it is blocking.you need to enable it for connecting to their IP.
For more clear and wider views: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Also you should be using http protocol rather than file:///home/wohlig/Documents/Projects/Training/Rough/Vue/apicalling/app.js Can go through this https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp
solution2
0 2019-10-19 12:53:06
This error happens because you open app.html directly in the browser. Eg when you double click and open it.
Instead you have to start a local server in the directory your project is.
If you are using a project template chances are it already has a configured npm start command. In this case use that command to start the development server. Otherwise you can go to the folder where app.html is and run npx live-server - this will serve the current directory. I assume you have nodejs installed ( node -v to check) otherwise the command won't run
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.