Vue项目导入JS文件及调用API时遭遇CORS错误（新手求助）

嘿，我来帮你拆解下遇到的问题，一步步搞定它：

1. 先搞懂为什么会出现CORS错误 #

你现在是直接双击打开本地的app.html文件，浏览器用的是file://协议加载它。但浏览器的同源策略明确限制了：跨源请求（包括本地模块导入）只支持http、https、chrome-extension这些协议，file://不在允许范围内，所以才会弹出这个CORS报错。

2. 第一步：解决CORS问题——用本地HTTP服务器运行项目 #

别直接打开HTML文件了，把项目放到本地HTTP服务器里跑，推荐两种简单方法：

• Node.js的http-server：先全局安装 npm install -g http-server，然后在项目根目录执行 http-server，之后用浏览器访问 http://localhost:8080/app.html
• Python简易服务器：如果装了Python3，在项目根目录运行 python -m http.server 8080，同样访问 http://localhost:8080/app.html

3. 第二步：修复代码里的模块导入/导出问题 #

你的app.js用的是export default导出，但HTML里却用import { nav } from './app.js'导入，这会导致找不到nav这个导出项，得改过来：

修改app.html的代码 #

<html>
<head>
<script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 给Vue实例加个挂载的DOM元素 -->
<div id="app"></div>
<script type="module">
// 因为app.js导出的是default，所以直接导入即可
import nav from './app.js'
var vm = new Vue({
  el: '#app', // 绑定到上面的div元素，Vue实例才能生效
  data: { datas:"gsdgsdg" },
  created(){
    nav.getOneId(function (err, data){
      if(data){
        console.log("afasfsafasfasf+++++++++="+data)
        // 可以把拿到的数据赋值给Vue的data，方便页面渲染
        this.datas = data.data
      }
    }.bind(this)) // 绑定this指向Vue实例，不然内部拿不到this.datas
    console.log("dfafasdfadf")
  }
})
</script>
</body>
</html>

可选优化app.js的代码 #

你原来的回调写法也能用，换成async/await会更简洁易读：

import axios from "axios";
const adminUrl = "http://localhost:3000/";
export default {
  async getOneId() {
    try {
      // axios返回的response里，实际数据在data字段里
      const response = await axios.get(adminUrl + "movie/getOneId/5d9d736963a1f027693e7fae");
      return response.data;
    } catch (err) {
      throw err;
    }
  }
}

如果用这个优化版本，HTML里的调用可以改成：

created(){
  async function fetchData() {
    try {
      const data = await nav.getOneId();
      console.log("afasfsafasfasf+++++++++="+data);
      this.datas = data;
    } catch (err) {
      console.error("获取数据失败：", err);
    }
  }
  fetchData.call(this); // 绑定this指向Vue实例
}

4. 额外检查：后端API的CORS配置 #

如果之后调用http://localhost:3000的API还是报CORS错，那得在你的后端服务器配置CORS允许前端访问。比如用Express框架的话，安装cors中间件：

const cors = require('cors');
const express = require('express');
const app = express();
// 开发环境可以直接允许所有跨域请求，生产环境要配置特定域名
app.use(cors());

按上面的步骤处理后，你的代码应该就能正常获取API数据啦～

内容的提问来源于stack exchange，提问作者Ajay Yadav