在我的基于 web 的 html 脚本中导入 js 文件时出现 CORS 错误

Question

Im trying to call api from inside vue instance inbuilt methods我试图从 vue 实例内置方法中调用 api

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.错误：CORS 策略已阻止从源“null”访问“file:///home/wohlig/Documents/Projects/Training/Rough/Vue/apicalling/app.js”处的脚本：仅支持跨源请求对于协议方案：http，数据，铬，铬扩展，https。

GET file:///home/wohlig/Documents/Projects/Training/Rough/Vue/apicalling/app.js net::ERR_FAILED 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);
      });
  }
}

Answer 1

Try using this piece of line in package.json "proxy": " http://192.165.1.220:28080 ",尝试在 package.json "proxy": " http://192.165.1.220:28008 " 中使用这条线

where this host and port will be of walmart and install "http-proxy-middleware" using npm and try again.该主机和端口将属于沃尔玛并使用 npm 安装“http-proxy-middleware”，然后重试。

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. CORS：解释跨域资源共享 (CORS) 是一种机制，它使用额外的 HTTP 标头告诉浏览器提供 web 在一个来源运行的不同来源的应用程序。 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.当 web 应用程序请求与自己具有不同来源（域、协议或端口）的资源时，应用程序执行跨域 HTTP 请求。意味着您的本地主机正在尝试连接其他域，因此出于安全目的它被阻止。您需要启用它以连接到他们的 IP。

For more clear and wider views: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS如需更清晰和更广泛的视图： 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 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

Answer 2

This error happens because you open app.html directly in the browser.发生此错误是因为您直接在浏览器中打开app.html 。 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.如果您使用的是项目模板，那么它可能已经配置了npm start命令。 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.否则，您可以 go 到app.html所在的文件夹并运行 npx npx live-server - 这将服务于当前目录。 I assume you have nodejs installed ( node -v to check) otherwise the command won't run我假设你已经安装了 nodejs（ node -v来检查）否则命令将不会运行

在我的基于 web 的 html 脚本中导入 js 文件时出现 CORS 错误

问题描述

2 个解决方案

解决方案1
0 2019-10-19 12:10:54

解决方案2
0 2019-10-19 12:53:06

在我的基于 web 的 html 脚本中导入 js 文件时出现 CORS 错误

问题描述

2 个解决方案

解决方案1 0 2019-10-19 12:10:54

解决方案2 0 2019-10-19 12:53:06

解决方案1
0 2019-10-19 12:10:54

解决方案2
0 2019-10-19 12:53:06