1

我试图从 vue 实例内置方法中调用 api

但它向我展示了一些错误

我正处于训练期，这对我来说是全新的

错误：CORS 策略已阻止从源“null”访问“file:///home/wohlig/Documents/Projects/Training/Rough/Vue/apicalling/app.js”处的脚本：仅支持跨源请求对于协议方案：http、data、chrome、chrome-extension、https。

GET file:///home/wohlig/Documents/Projects/Training/Rough/Vue/apicalling/app.js net::ERR_FAILED

我试图从我的数据库中检索数据

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);
      });
  }
}
4

2 回答 2

3

发生此错误是因为您app.html直接在浏览器中打开。例如，当您双击并打开它时。

相反，您必须在项目所在的目录中启动本地服务器。

如果您使用的是项目模板，那么它可能已经配置了npm start命令。在这种情况下，使用该命令启动开发服务器。否则，您可以转到所在的文件夹app.html并运行npx live-server- 这将服务于当前目录。我假设你已经安装了 nodejs（node -v检查）否则命令将不会运行

于 2019-10-19T12:53:06.343 回答
0

尝试在 package.json "proxy" 中使用这一行：" http://192.165.1.220:28080 ",

该主机和端口将属于沃尔玛并使用 npm 安装“http-proxy-middleware”并重试。

CORS：说明 跨域资源共享 (CORS) 是一种机制，它使用额外的 HTTP 标头告诉浏览器让在一个来源运行的 Web 应用程序可以访问来自不同来源的选定资源。当一个 Web 应用程序请求一个与它自己具有不同来源（域、协议或端口）的资源时，它会执行一个跨域 HTTP 请求。意味着您的 localhost 正在尝试连接其他域，因此出于安全目的它被阻止。you需要启用它以连接到他们的 IP。

如需更清晰和更广泛的观点：https ://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

你也应该使用 http 协议而不是 file:///home/wohlig/Documents/Projects/Training/Rough/Vue/apicalling/app.js 可以通过这个https://developer.mozilla.org/en-US /docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp

于 2019-10-19T12:10:54.210 回答