在 vue js 中的基于 Web 的 html 脚本中导入 js 文件时出现 CORS 错误
Posted
技术标签:
【中文标题】在 vue js 中的基于 Web 的 html 脚本中导入 js 文件时出现 CORS 错误【英文标题】：CORS error while importing a js file in my web based html script in vue js 【发布时间】：2020-02-16 04:20:25 【问题描述】：我正在尝试从 vue 实例内置方法中调用 api
但它显示了一些错误
我正处于训练期，这对我来说是全新的
错误： 访问脚本在 'file:///home/wohlig/Documents/Projects/Training/Rough/Vue/apicalling/app.js' 来自原产地 “null”已被 CORS 策略阻止：跨源请求仅支持 协议方案：http、data、chrome、chrome-extension、https。
获取文件：//home/wohlig/Documents/Projects/Training/Rough/Vue/apicalling/app.js 网络::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);
);
【问题讨论】：
【参考方案1】：发生此错误是因为您直接在浏览器中打开app.html。例如。当您双击并打开它时。
相反，您必须在项目所在的目录中启动本地服务器。
如果您使用的是项目模板，它可能已经配置了npm start 命令。在这种情况下，使用该命令启动开发服务器。否则，您可以转到app.html 所在的文件夹并运行npx live-server - 这将为当前目录提供服务。我假设你已经安装了 nodejs（node -v 检查）否则命令将不会运行
【讨论】：
【参考方案2】：尝试在 package.json 中使用这一行 "代理": "http://192.165.1.220:28080",
此主机和端口将是 walmart 并使用 npm 安装“http-proxy-middleware”并重试。
CORS：解释 跨域资源共享 (CORS) 是一种机制，它使用额外的 HTTP 标头告诉浏览器让在一个来源运行的 Web 应用程序访问来自不同来源的选定资源。当一个 Web 应用程序请求一个与它自己具有不同来源（域、协议或端口）的资源时，它会执行一个跨域 HTTP 请求。意味着您的 localhost 正在尝试连接其他域，因此出于安全目的它被阻止了。你需要启用它以连接到他们的 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
【讨论】：
以上是关于在 vue js 中的基于 Web 的 html 脚本中导入 js 文件时出现 CORS 错误的主要内容，如果未能解决你的问题，请参考以下文章
PiranhaCMS 中的 DevExpress Web 仪表板
基于Vue JS, Webpack 以及Material Design的渐进式web应用第1部分